Question

我正在使用React.js。我在这里遇到错误“无法读取未定义的属性'map'”：1

  17 |    };
  18 | 
  19 |    return (
> 20 |        <div>
  21 |            {items.map(item => (
  22 |                <h1 key={item.itemid}>{item.name}</h1>
  23 |            ))}

我的代码是： Code

有人知道解决方案吗？

Answer 1

有一些基本问题：

您必须更改API URL。屏幕快照中的一个是无效URL。
您必须更改要访问的属性名称。是jsonItems.data，而不是jsonItems.items。

对于口味，您已经使用items关键字两次声明了const。我建议在您的items函数范围内重命名fetchItems。例如：

const fetchItems = async() => {
  const data = await fetch("https://fortnite-api.theapinetwork.com/store/get");
  const jsonItems = await data.json();
  console.log(jsonItems.data);
  setItems(jsonItems.data);
};

要使其按需运行，还必须更改渲染方法：

  return (
    <div className="App">
        {items.map(item => (
          <h1 key={item.itemId}>{item.item.name}</h1>
        ))}
    </div>
  );

这是您要复制粘贴的最后一件事： https://gist.github.com/peaceful-james/db0805edba1bad5323f66701ee5d0e4e

Answer 2

呈现此组件时，有时未定义

items。防止这种情况发生的一种方法是使用短路评估：

{items && items.map(item => (
  <h1 key={item.itemid}>{item.name}</h1>
))}

看看您的代码，items在数据提取完成之前是未定义的，因此此防护措施应该起作用。许多人使用的另一种选择是在获取过程中显示某种“正在加载”。可以使用三元运算符如下实现：

{!items ? "Loading..." : items.map(item => (
  <h1 key={item.itemid}>{item.name}</h1>
))}

Answer 3

items在异步功能完成时设置。但是在调用渲染之前。您可以使用以下代码解决此问题。

{items && items.length > 0 && items.map(item => (<h1 key={item.itemid}>{item.name}</h1>))}`

Answer 4

只需按照以下方式进行修改：-

 {items && items.map(item => (
        <h1 key={item.itemid}>{item.name}</h1>
))}

Answer 5

看到您的初始状态是一个空数组。它不应在初始渲染时显示错误。但是，当您设置项目时，它变得不确定。您能否共享从提取请求中获取的数据。

您也可以尝试以这种方式代替异步/等待方式

fetch('fortnite-public-api.theapinetwork.com/prod09/upcoming/get')
  .then(res => res.json())
  .then(data => setItems(data.items));

Answer 6

正如Nick所解释的，items在初始渲染发生时未定义。我们可以做到

{items.length && items.map(item => (
  <h1 key={item.itemid}>{item.name}</h1>
))}

React.js“无法读取未定义的属性'map'”

6 个答案: