如何在ReactJS中解决map函数问题？

bfrts1fy 于 8个月前发布在 React

关注(0)|答案(1)|浏览(55)

此问题在此处已有答案：

× TypeError: Cannot read properties of undefined (reading 'map')（24个回答）
21小时前关闭
我正在获取数据并将props传递给其他组件。但在其中一个子组件中，我无法使用map（）函数。我得到 Cannot read properties of undefined（阅读'map'）。我认为这是一个异步数据问题。但我无法解决它。
下面是我的子组件：

function WeeklyForecast({data}) {

      console.log(data);
      
      return (
        <div className='WeeklyForecast'>
          <div className="Prev-Btn">
            <button>&lt;</button>
          </div>
          <div className="Forecast-List">
          {data.map((forecast, index) => (
              <div key={index}>
    
                <p>{forecast[0]}</p>
    
              </div>
            ))}
          </div>
          <div className="Next-Btn">
            <button>&gt;</button>
          </div>
        </div>
      )

}

字符串
这里有我的错误和没有map（）函数的浏览器控制台结果：

的数据

的

reactjs

来源：https://stackoverflow.com/questions/77497417/how-can-i-solve-map-function-problem-in-reactjs

1条答案

按热度按时间

e37o9pze1#

所以你面临的问题是你试图在数据变得可用之前Map它（根据你的日志）你想做的是确保数据在盲目Map之前是可用的...你可以通过检查数据是否可用来做到这一点。你可以了解更多关于条件渲染here的信息。
只需在语句中添加一个&&（AND）子句，这样就可以保证数据不是未定义的和可用的。
这将使您给予等待从服务器加载数据的能力。
因此，语句变为data && data.map(...)
所以你的代码看起来像下面这样。

function WeeklyForecast({data}) {

      console.log(data);
      
      return (
        <div className='WeeklyForecast'>
          <div className="Prev-Btn">
            <button>&lt;</button>
          </div>
          <div className="Forecast-List">
          {data && data.map((forecast, index) => (
              <div key={index}>
    
                <p>{forecast[0]}</p>
    
              </div>
            ))}
          </div>
          <div className="Next-Btn">
            <button>&gt;</button>
          </div>
        </div>
      )

}

字符串

赞(0）回复(0）举报 8个月前

我来回答

如何在ReactJS中解决map函数问题？

1条答案

相关问题

热门标签

最新问答