如何解决React运行时TypeError: newsData.map is not a function报错

错误原因 #

TypeError: newsData.map is not a function 报错的核心逻辑是：newsData在运行时被修改为非数组类型，而只有数组才拥有map方法。
你使用axios发起请求时，拿到的res是axios封装的完整响应对象，包含状态码、响应头、配置项等字段，接口实际返回的列表数据存在res.data属性中。你直接将完整响应对象赋值给newsData，就把初始的空数组替换为了对象类型，调用map自然会抛出错误。
VS Code没有报错是因为静态类型检查仅识别到你给newsData设置的初始值为数组，无法预判运行时数据被覆盖为其他类型的情况。

修复方案 #

修改getNews方法中的赋值逻辑，提取响应对象的data字段赋值即可：

const getNews = () => {
  axios
    .get("http://localhost:3001/articles")
    .then((res) => setNewsData(res.data));
};

可选优化 #

为了避免后端接口异常返回非数组类型时再次出现同类报错，可以在调用map时加可选链做兜底，同时不要忘记给遍历元素加key属性、把数据传递给Article组件：

<ul>
  {newsData?.map((article) => (
    <Article key={article.id} content={article} />
  ))}
</ul>

内容的提问来源于stack exchange，提问作者Philippe Tankoano