Question

我有一个像这样的对象：

    {
      "id": 1,
      "name": "car",
      "colors": ["white", "black"]
    }

我使用useState将对象放入data中。
当我尝试data.name时，结果是“汽车”
当我尝试data.colors时，结果为“ whiteblack”
但是当我尝试使用以下颜色映射时：

{data.colors.map((color, i) =>
  <span key={i} >{color}</span>
)}

生病了TypeError: Cannot read property 'map' of undefined
我想念什么？

Answer 1

一个可能的原因是您尝试在加载数据之前映射数据。例如，如果在加载组件时启动对某些资源的访存调用，但同时也映射到返回的对象上。在这种情况下，数据将是不确定的。

一个简单的解决方法是在映射数据之前检查数据是否未定义。

{data && data.colors.map((color, i) =>
  <span key={i} >{color}</span>
)}

Answer 2

可能是状态初始化问题，您可以执行以下操作：

const [state, setState] = useState({
      "id": "",
      "name": "",
      "colors": []
    });

useEffect(() => setState({
      "id": 1,
      "name": "car",
      "colors": ["white", "black"]
    }), []);

这将解决您的map of undefined问题。

映射数组中的项目-反应

2 个答案: