添加新项目后数组不会更新，使用 React Hooks

Question

我有一个数组，显示一组附加到用户的项目。 该数组首先检查当前用户是否在项目的库存中，然后在表格上显示为“用户名”和“借用日期”。 添加功能在模态中完成，并假设更新表。

问题是每次我添加、删除或更新时，表根本不更新。 此表也是另一个表的扩展组件（react-data-table-component）

这是我的表的 useState 和 useEffect：

const InventoryTable= ({ 
selectedUser, 
items, 
getItems, 
getUsers 
}) => { 
   useEffect(() => { 
   getItems(); 
   getUsers(); 
  }, []); 

  const [data, setData] = useState([]);

  useEffect(() => {
    let data= [];
    data= items?.filter((item) =>
      item?.users.some(
        (user) => parseInt(user?.id) === parseInt(selectedUser?._id)
      )
    );

    setData(data);
  }, []);

注意：selectedUser，是主表中被选中的用户，这个当前表是用来显示附加到它的。

如果我在setData(data); }, []);上添加data setData(data); }, []); setData(data); }, []); 它崩溃了。 在依赖数组上添加数据、selectedUser 和项目会不间断地加载它，从而导致页面崩溃

Answer 1

useEffect 方法以 2 个参数作为输入。

1. 打回来
2. 依赖

如果依赖项是空数组，它将以与 Class Component 类似的方式调用 componentDidMount 和 componentWillUnmount 生命周期方法。

如果存在依赖关系，则在绘制 UI 后将调用回调。

很明显你错过了必需的依赖

Answer 2

我不确定我是否理解您的代码的全部概念，因为它只是代码的一小部分。 但是 useEffect() 会相应地运行，如果您希望它作为 ComponenentDidMount 运行，您将使用上面所说的代码，但是在您的情况下，您要更新 delete add 这意味着您要检测数据的更改，因此您需要包含数据在这样的括号内

`useEffect(() => {

 let data= [];
data= items?.filter((item) =>
  item?.users.some(
    (user) => parseInt(user?.id) === parseInt(selectedUser?._id)
  )
);
setData(data);

}, [数据,项目,selectedUser]);`

Answer 3

似乎您忘记传递items和selectedUser来影响依赖项数组。

Answer 4

也许我错了，但是您是否尝试过在 useEffect 中重命名数据属性？ 应该有问题，您正在设置状态而没有设置回调。 还尝试将 useState 默认值设置为 [] 而不是 {} （对象）。