React.js，如何正确使用map()函数显示数据？

Question

我想在电子应用程序的一个页面中显示用户数据。 我从 firebase/firestore 获取数据，然后将其放入数组中，然后，我想在表格中显示该数据，但无法在页面上显示数据。

这是我的代码：

function Home() {
  const [allUsers] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const querySnapshot = await getDocs(collection(db, 'users'));
        let allDocs = [];
        querySnapshot.forEach((doc) => {
          allDocs.push({ ...doc.data(), id: doc.id });
        });
        for (const item of allDocs) {
          allUsers.push(item);
        }
      } catch (err) {
        console.log(err);
      }
      console.log(allUsers)
    };
    fetchData();
  }, []);


  return <div className="home">
    {Object.keys(allUsers).map((keyName) => (         
    <p>{allUsers[keyName].firstname}</p>
    ))}
  </div>;
}

以下是数据的样子：

Answer 1

您应该使用状态设置器来更新allUsers 。 您正在改变数据（反 React 模式）。 尝试这样做（我在代码中添加了注释）：

function Home() {
  const [allUsers, setAllUsers] = useState([]); // line I changed
  useEffect(() => {
    const fechedUsers =[];  // line I added
    const fetchData = async () => {
      try {
        const querySnapshot = await getDocs(collection(db, 'users'));
        let allDocs = [];
        querySnapshot.forEach((doc) => {
          allDocs.push({ ...doc.data(), id: doc.id });
        });
        for (const item of allDocs) {
          fechedUsers.push(item);
        }
      } catch (err) {
        console.log(err);
      }
      setAllUsers(fechedUsers) // line I added
    
    };
    fetchData();
  }, []);

  // lines I changed
  return <div className="home">
    {allUsers.map(user => <p>{user.firstname}</p>)}
  </div>;
}

Answer 2

目前您使用Object.keys()来映射数组。 当您使用此函数时，您会收到一个数组，其中包含数组中的所有索引。 因此，这意味着您将获得一个包含数据[0, 1, ... ]的数组，具体取决于数据的长度。

但是因为您使用数组，您可以立即映射数组中的所有对象。 像这样：

return <div className="home">
    {allUsers.map((user) => (         
        <p>{user.firstname}</p>
    ))}
</div>

用户变量将是您在 allUsers 数组中推送的对象。 您还应该使用像useState这样的状态设置器

Answer 3

您不需要使用索引来迭代响应。 当您使用 map 函数时，您可以访问索引作为 map 函数内部的参数，并且可以在需要时使用它。

 return (
       <div className="home">
        {allUsers.map((user, index) => {  
          return(
             <div  key={index} className='user-data'>
              //if you're using a table might  need to change the  `p` tag with `td` inside a `tr`
              <p>{user.firstname} </p>
             </div>
           )
        }
        )}
      </div>);