为什么在更新上下文时，我的组件不重新更新？

Question

我想在从API获取数据之后呈现一个表，我使用上下文API和自定义钩子来更新上下文。我知道我的钩子正在工作，因为第二个useEffect记录数据。我知道React中的状态更新是异步的，但是我认为上下文中的更改会触发一个重发。

import React, { useEffect, useContext } from "react";

import { titleCase } from "title-case";
import dataContext from "../../context/dataContext";

const fetchUsers = async (url:string) => {
  const response = await fetch(url);
  return response.json();
};


const Table = () => {
  const {data, setData } = useContext(dataContext);

  useEffect(() => {
    fetchUsers(`https://randomuser.me/api/?results=50`).then(
      (res) => {setData([...data, res.results]) ;

      }
    )
    
  }, [])

  useEffect(() => {
    console.log(data)
  }, [data])
    
  return (
    <table>
      <thead>
        <tr>
          <th>
            Name
          </th>
          <th>
            Gender
          </th>
          <th>
            Birth
          </th>
          <th>
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        {data.length >0 && data.map((user: Record<string, any>, index: number) => {
            const dob = new Date(user.dob.date);

            return (
              <tr>
                <td>
                  {`${titleCase(user.name.first)} ${titleCase(user.name.last)}`}
                </td>
                <td>
                  {titleCase(user.gender)}
                </td>
                <td>
                  {dob.toLocaleDateString()}
                </td>
                <td>
                  <button>View</button>
                </td>
              </tr>
            );
          })}
       
      </tbody>
    </table>
  );
};

export default Table;

Answer 1

您发布的代码有多个问题。

1. 您需要在res.results内部取消setData的结构。如果不这样做，用户数组将作为单个对象存储，而不是存储所有多个用户对象。setData([...data, ...res.results)
2. 您应该为列表中的每个子类提供唯一的密钥。知道更多关于它的这里。您可以为每个用户使用login.uuid字段作为密钥。<tr key={user.login.uuid}>
3. 您需要提供data作为useEffect钩子的依赖项。
4. 最后，如果不连续执行useEffect钩子，则最好使用设置间隔调用随机用户API。

我做了一个简单的演示，如下所示。在演示中，我不使用上下文。我每10秒获取两个新用户，然后用他们的电子邮件更新一个表。演示链接。

我知道这是一个很晚的帖子，但我花了一些时间研究这个问题，并认为这可能会对你有所帮助。希望你现在已经解决了你的问题。