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

Question

我想在从 API 获取数据后呈现一个表，我使用 Context 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. 您需要在 setData 中res.results 。 如果不这样做，用户数组将存储为单个对象，而不是存储所有多个用户对象。 setData([...data, ...res.results)
2. 您应该为列表中的每个孩子提供一个唯一的键。 在此处了解更多信息。 您可以使用每个用户的login.uuid字段作为键。 <tr key={user.login.uuid}>
3. 您需要提供data作为useEffect挂钩的依赖useEffect 。
4. 最后，最好使用设定的时间间隔调用随机用户 API，否则 useEffect 钩子会连续执行。

我做了一个简单的demo，它遵循了以上几点。 在演示中，我没有使用上下文。 我每 10 秒获取 2 个新用户，然后用他们的电子邮件更新表格。 演示链接。

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