Question

当modal.error设置为true时，应运行我的效果：

useEffect(() => {
  if (modal.error) {
    setModal({...modal, prompt: false})
  }
}, [modal]);

modal-是一个对象：

const [modal, setModal] = useState<SomeInteface>({
  success: false,
  error: false,
  prompt: false
})

但是我只想在useEffect中使用deps modal.error，但是当我这样做时，lint警告我有关穷举/ deps烦人的规则，为什么我应该将整个对象放入deps数组中，而不是只是其特性之一。显然，这将导致无限循环，因为对象modal总是会变化。

我还是不明白，为什么React团队一开始就放弃了生命周期的范式（而不是3），这简直是太方便了，这与这些详尽的/ deps规则更加令人困惑，我已经读了很多文章关于useEffect，但我仍然认为生命周期要好得多。

更新1

const removePartner = (): void => {
  setModal({
    ...modal,
    prompt: false
  });
  deleteRequest(undefined, modal.id).then((resp: any) => {
    if (resp) {
      setModal({ ...modal, success: true });
    } else {
      setModal({ ...modal, error: true });
    }
  });
};

更新2

TSX部分：

<Swal
  show={modal.prompt}
  icon={Icons.warning}
  title="Warning!"
  text="Are you sure?"
  cancelButton={true}
  onModalClose={() => setModal({ ...modal, prompt: false })}
  onAccept={removePartner}
/>
<Swal
  show={modal.error}
  icon={Icons.error}
  title="Error"
  text={fetchError!}
  onModalClose={() => setModal({ ...modal, error: false })}
/>
<Swal
  show={modal.success}
  icon={Icons.success}
  title="Success!"
  text="You have removed a user!"
  onModalClose={() => {
    setModal({ ...modal, success: false });
    doFetch().then();
  }}
/>

Answer 1

我认为您不需要useEffect。您只需要将状态绑定到模态即可。

<Modal open={modal.error} />

您只需要一个条件即可设置modal.error的状态

Answer 2

我改变了在useState钩子中使用对象的想法，它们是为原始值使用的，这很有意义，否则我建议其他人对复杂的对象使用useReducer。这样，useEffect deps循环就不会出现整个对象更改的原因了。

useEffect与详尽的deps循环

2 个答案: