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

Question

我正在获取数据并将道具传递给其他组件。但在其中一个子组件中，我无法使用 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() 函数：

Answer 1

所以你面临的问题是你试图在数据可用之前映射数据（根据你的日志）你想要做的是确保数据在盲目映射之前可用......你可以这样做通过检查数据是否可用。

只需在语句中添加 && (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>
      )

}