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

Question

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

这是我的代码：

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

您应该使用状态 setter 来更新 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 数组的对象。您还应该使用状态 setter，例如 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>);

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

React.js, how to properly use the map() function to display data?

html

javascript

reactjs

electron