添加新項目后數組不會更新，使用 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 默認值設置為 [] 而不是 {} （對象）。