如何解决ReactJS中的map函数问题？[复制]-解网

问：

5天前关闭。

我正在获取数据，并将道具传递给其他组件。但是在其中一个子组件中，我不能使用 map（）函数。我得到无法读取未定义的属性（读取“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（）函数：

JavaScript ReactJS 异步获取

因此，您面临的问题是，您正在尝试在数据可用之前对其进行映射（根据您的日志），您要做的是在盲目映射数据之前确保数据可用......您可以通过检查数据是否可用来执行此操作。您可以在此处了解有关条件渲染的更多信息。

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

}

上一个：如何计算异步中 interval1 > interval2 的次数

下一个：异步 Python Telegram 机器人的本地化

如何解决ReactJS中的map函数问题？[复制]

How can I solve map function problem in ReactJS? [duplicate]

评论