使用新条目更新 React 状态后的奇怪行为

Question

在我的 CRUD 应用程序中，每次使用新条目更新初始状态（数组列表）时我都会遇到问题。

点击添加按钮应该会打开一个模式并填写一个 react-hook-form。提交时应通过添加新条目来更新状态。单击编辑按钮应打开模式并将数据加载到 react-hook-form。提交时应通过更新相应的条目来更新状态。

一切正常，直到我在状态中添加一个新条目。该条目显示在 table 中，单击该条目或任何其他条目的编辑按钮都可以正常工作。单击任何条目的按钮时，isEdit 状态再次停止更改。我有一个working demo here

在App.js 这些是应用程序中的状态。一个用于用户列表，一个用于区分添加和更新功能，最后一个用于在更新用户时将默认值传递给表单。

const [users, setUsers] = useState([]);
const [isEdit, setIsEdit] = useState(false);
const [defaultValues, setDefaultValues] = useState(initialDefaultValues);

有一个来自 GET 请求的用户列表。当请求解析成功后，我将返回的数据设置为state.

// get Users
  const fetchUsers = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    const resData = await res.json();
    if (res.status === 200) {
      setUsers(resData);
    } else {
      alert(resData);
    }
  };

  // execute on component render
  useEffect(() => {
    fetchUsers();
  }, []);

有一个组件渲染一个react-bootstrap-table-next并从状态中获取数据。

<UsersTable
  data={users}
  prepareUpdateUser={prepareUpdateUser}
  prepareDeleteUser={prepareDeleteUser}
/>

此 table 每个条目都有两个按钮。一个编辑按钮和一个删除按钮。单击这些按钮时，将相应地执行两个准备功能（prepareUpdateUser、prepareDeleteUser）。这是 prepareUpdateUser() 的代码。该函数将用户作为参数，将 isEdit 状态更改为 true，更新 defaultValues 以传递给 react-hook-form，最后打开模态。

const prepareUpdateUser = (user) => {
    setIsEdit(true);
    setDefaultValues({
      id: user.id,
      name: user.name,
      email: user.email
    });
    toggleUserModal();
  };

当模式关闭时，我将 isEdit 和 `defaultValues`` 状态重置为其初始值。

const [userModal, toggleUserModal] = useModali({
    animated: true,
    title: isEdit ? "Update User " : "Add User ",
    onHide: () => {
      isEdit && setIsEdit(false);
      setDefaultValues(initialDefaultValues);
    }
  });

问题是在状态下添加新条目然后尝试点击任何条目的编辑按钮后，一切有效，但是下一次你点击按钮时，isEdit状态在每次模式关闭和每次prepareUpdateUser运行时停止更新。 更新条目时不会出现该问题。

这是将新用户添加到用户列表的代码

const addUser = (data) => {
 const newArray = users.slice();
 newArray.splice(0, 0, data);
 setUsers(newArray);
 toggleUserModal();
};

这是更新用户的代码

const updateUser = (data) => {
 const updatedUser = users.findIndex((user) => user.email === data.email);
 const newArray = users.slice();
 newArray[updatedUser] = data;
 setUsers(newArray);
 toggleUserModal();
};

如果您要使用演示 link，请按以下步骤重现问题。

点击任何编辑按钮。一切都加载并且 isEdit 状态为真。
点击添加按钮。表单为空，isEdit 状态为 false。
添加一个新条目。
列表随新条目更新。
单击编辑按钮。似乎有效。
再次单击编辑按钮，现在 isEdit 为 false，表单中未加载任何数据

有没有人遇到过类似的事情？我对反应还很陌生，我不明白为什么会这样。任何建议都会很有帮助。

提前谢谢大家。

Answer 1

**I have just modified below block of code**

 const prepareUpdateUser = (user) => {   
setIsEdit(true);
setDefaultValues({
  id: user.id,
  name: user.name,
  email: user.email
});
 };

  **Newly added one useEffect**
useEffect(() => {
if (isEdit) {
  toggleUserModal();
}
}, [isEdit]);

try this. Please give your valuable feedback

使用新条目更新 React 状态后的奇怪行为

Strange behavior after React state update with new entry

javascript

state

reactjs