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

Question

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

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

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

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

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

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

// 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}
/>

此表的每个条目都有两个按钮。一个编辑按钮和一个删除按钮。单击这些按钮后，两个准备函数会相应地执行（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();
};

如果您要使用演示链接，这里是重现问题的步骤。

1. 单击任何编辑按钮。一切都加载完毕，isEdit 状态为真。
2. 单击添加按钮。表单为空，isEdit 状态为 false。
3. 添加新条目。
4. 列表更新为新条目。
5. 单击编辑按钮。似乎有效。
6. 再次单击编辑按钮，现在isEdit 为假，表单中未加载任何数据

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

提前谢谢大家。

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