无法运行。在 JavaScript / React 中映射数组答案

【问题标题】：Unable to run. map on array in JavaScript / React无法运行。在 JavaScript / React 中映射数组
【发布时间】：2020-12-27 11:51:19
【问题描述】：

我在通过嵌套数组locations 映射时遇到错误。以前这个逻辑是有效的，我认为数组类型是相同的，所以不知道为什么这不适用于这个 locations 数组。

错误：

Uncaught TypeError: this.state.locations.map is not a function

映射代码

<tbody>
  {this.state.locations.map(location =>
  <tr>
    <td>
      <Link to={`${this.state.tracker.key}/locations/`}>{location.name}</Link>
    </td>
    <td>{location.canal}</td>
    <td>{location.closesttown}</td>
    <td>{location.comment}</td>
  </tr>
  )}
</tbody>

这是未迭代的数组。

0: {key: "79", doc: e, name: "", canal: "", closesttown: "", comment: ""}
1: {key: "Nq", doc: e, name: "", canal: """", closesttown: "",comment: ""}

这是我可以正确映射的数组

0: {key: "Fr", doc: e, title: "Location", description: "My fav locations", author: "Gemma"}
1: {key: "G6", doc: e, title: "Gas", description: "Date of starting new gas cannister", author: "Gemma"}
2: {key: "za", doc: e, title: "", description: "", author: ""}

这是最初创建位置的地方：

this.state = {
      tracker: {},
      key: '',
      locations: {},
    };

这是我获取位置数据的地方：

onCollectionUpdate = (querySnapshot) => {
    const locations = [];
    querySnapshot.forEach((doc) => {
      const { name, canal, closesttown ,comment } = doc.data();
      locations.push({
        key: doc.id,
        doc, // DocumentSnapshot
        name,
        canal,
        closesttown,
        comment,
      });
    });
    this.setState({
      locations
   });
  }

【问题讨论】：

locations 的初始值是多少？它是一个数组吗？你是如何在locations 中设置数据的？
@AjeetShah 我已经更新了这些详细信息（数组）
位置的初始值应该是空数组，this.state = { tracker: {}, key: '', locations: [], };也是如此
哦，哇，我完全错过了！！！非常感谢！！！！！！

标签： javascript arrays reactjs

【解决方案1】：

您将所在州的位置作为对象。如果您要在其上运行 .map，它需要是一个数组。

地点：[]，

看起来 .map 函数试图在 this.state.locations 中有值之前运行。所以它试图在不是数组/未定义/空的东西上运行 .map。

添加一个？在 .map 之前，这样它不会运行 .map，直到位置被定义并且不为空。

  {this.state.locations?.map(location =>

请参阅此link 了解有关 ? 的更多信息。符号。

您可能还想查看位置数组中的第二项。运河物业有两套报价。它应该只是“”而不是“”“”。

【讨论】：

谢谢！问题解决了。是的，我已经更新了“”，现在已经将位置更新为一个数组。这是关于“？”的一个非常有用的提示。我会用那个。

【解决方案2】：

第一个数组的第二个对象无效。尝试将第二个对象的“canal”值更改为：

""""

到

""

【讨论】：

感谢您的关注。我已经更新了这个，但不是迭代的问题。