使用 React Hooks 添加新项目后数组不更新答案

【问题标题】：Array doesn't update after adding new item, using React Hooks使用 React Hooks 添加新项目后数组不更新
【发布时间】：2020-09-26 14:02:18
【问题描述】：

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

问题是每次我添加、删除或更新时，表根本不会更新。此表也是另一个表的扩展组件（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，是主表中被选中的用户，这个当前表是为了显示附加到它的itms。

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

【问题讨论】：

我们需要更多信息，例如错误是什么，可能不相关，但您为什么在变量末尾使用问号，例如：items?、selectedUser?、item?
完全没有错误。它成功添加，但不刷新表格
使用“？”在变量的末尾是可选链接运算符有条件地分配而不会遇到异常。好吧，我刚刚学到了一些我不知道的东西。
useState({}) 包含一个对象，可能使用数组设置 useState([])

标签： javascript arrays reactjs react-redux react-hooks

【解决方案1】：

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

回调
依赖关系

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

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

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

【讨论】：

您好，我尝试在依赖数组中添加数据、项目和 selectedUser，但它崩溃了。而且我似乎找不到错误的根源。如果我尝试仅在依赖数组上插入 selectedUser ，它不会工作
只传递项目， selectedUser 如果您想根据这些两个值进行更新。还将数组设置为数据的初始状态 useState({}) -> useState([]) 因为过滤器输出将是一个数组。
我其实是想更新data，因为它是用来显示表格上的值
是的。但你想在这里更新数据。不听数据变化？添加数据作为依赖可能会触发无限循环的更新。
是的。它确实触发了无限循环。如果我尝试添加 selectedUser 并且项目根本不起作用。

【解决方案2】：

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

`useEffect(() => {

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

}，[数据，项目，选定用户]）；`

【讨论】：

在括号内添加数据会使页面崩溃。而且很奇怪，根本没有错误
我真的不明白您为什么尝试在 useEffect() 中设置数据。我不建议您使用 UseEffect 除非您正在处理希望它们在组件安装和卸载时执行的代码。如果您特别想检测状态的变化并对该状态变化采取行动，您将使用 UseEffect() 方法和要检测其变化的数据的括号。否则，如果您坚持，我不建议您使用告诉我你的包含 useEffect 的组件
这是在我的组件之前： const InventoryTable= ({ selectedUser, items, getItems, getUsers }) => { useEffect(() => { getItems(); getUsers(); }, [] ); const [data, setData] = useState({});
你应该创建一个 codepen 可能对我们来说更容易。
好吧，我已经看过你的代码了。事实上，它不会添加删除或更新，因为该函数仅在组件安装时调用一次，所以你必须做的是，如果你熟悉 useReducer，你应该使用它而不是 useEffect。此外，我仍然不知道添加和更新发生在哪里。对于这些有限的信息，我们无法为您提供帮助。

【解决方案3】：

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

【讨论】：

它不起作用。如果我在依赖数组中添加一些东西，我不知道为什么它会崩溃

【解决方案4】：

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

【讨论】：

如果您不确定答案并且只是建议，请尝试发表评论而不是发布答案。