javascript - .map() 未定义，即使我传递了一个数组

Question

我试图在我的组件渲染方法中映射一个数组，但它一直在说.map is not a function，即使它是一个数组。

return (
  <select className="c-select">
    <option value="">Choose your city</option>
      {console.log(state.cities.items)}
      {state.cities.items.map(city => <option key={city.slug} value={city.slug}>{city.name}</option>)}
  </select>
);

控制台日志给了我这个结果：

[{"id":1,"name":"Berlin","country":"Germany","default":1,"slug":"berlin"},{"id":2,"name": "汉堡","国家":"德国","默认":0,"slug":"汉堡"}]

我不知道为什么.map未定义-我在这里遗漏了什么吗？

Answer 1

如果您使用的是 Chrome 或 Firefox，它看起来像是state.cities.items一个 JSON 字符串，而不是一个数组。

尝试

{JSON.parse(state.cities.items).map(...)}

当您使用console.log真正的数组时，输出将类似于Array [ Object, Object ]Firefox 或>[Object]Chrome