Question

我该如何映射这些数据？错误提示“无法读取未定义的属性‘map’”

2021-08-20

357

javascript reactjs firebase google-cloud-firestore

我一直有这个错误：

Uncaught TypeError: Cannot read property 'map' of undefined

我正在使用 useEffect 从 firestore 检索数据

const [users, setUsers] = useState();

  useEffect(() => {
    const unsubscribe = firestore
      .collection("users")
      .doc(result)
      .onSnapshot((snapshot) => {
        const arr = [];
        arr.push({
          ...snapshot.data(),
        });

        setUsers(arr);
        console.log(JSON.stringify(arr));
      });

    return () => {
      unsubscribe();
    };
  }, []);

数据的 JSON.strinify 结果：

[
  {
    email: "[email protected]",
    createdDate: { seconds: 1629266050, nanoseconds: 525000000 },
    displayName: null,
  },
];

这是我的功能组件内部，我一直有错误说无法读取 map 的属性

{users.map((user) => (
          <li>{user.email}</li>
        ))}

Answer 1

首先，检查用户数据是否已获取并存储在状态中

{users && users.map((user) => (
          <li>{user.email}</li>
        ))}

Answer 2

缺少初始状态，因此它将其视为未定义。因此，它尝试映射未定义。

像这样添加初始状态 const [users, setUsers] = useState([]);

Answer 3

首先用空数组初始化状态。最初状态为空，因此映射未定义

const [users, setUsers] = useState([]);

然后执行如下所示的条件检查以确保安全。

{
users?.map((user) => <li>{user.email}</li>)
}

这 ? 检查值是否未定义。

参考 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining