Question

useEffect(() => {
  if (!isEditing) {
    setIsDialogOpen(false); // this happens first
  }
}, [isEditing]);

useEffect(() => {
  if (!isDialogOpen) {
    setIsEditingTool(false); // this should happen second
  }
}, [isDialogOpen]);

isEditing是一个道具，来自redux状态。根据isEditingTool状态显示对话框标题（“添加” /“编辑”）文本（在第二个窗口中进行设置） useState）。仅在关闭对话框之后，才应更改isEditing状态，以使文本在关闭对话框之前不会更改。我尝试了很多选项（setTimeout / usePrevious钩子/ useLayoutEffect），但是它不起作用。有什么办法可以解决，剩下的唯一选择就是制作独立的组件，这是我不想要的。在这里，我使用两种状态，仅在对话框关闭后才设置isEditingTool。根据我的理解，会有两种不同的渲染。

Answer 1

我已经在这里实现了解决方案：https://codesandbox.io/s/frosty-fire-xz1pt?file=/src/App.js

通过钩子，我们可以使用useEffect更新另一个状态后再更新一个状态。

export default function App() {
  const [text1, setText1] = useState("");
  const [text2, setText2] = useState("");

  // update text2, when text1 updates
  useEffect(() => {
    if (text1) {
      setText2(`${text1}, then this is text 2`);
    }
  }, [text1]);

  return (
    <div className="App">
      <h1>useState callback</h1>
      <h3>{text1}</h3>
      <h4>{text2}</h4>
      <button onClick={() => setText1("this is text 1")}>Click This</button>
    </div>
  );
}

如何仅在功能组件中的另一种状态改变之后才使一种状态改变？

1 个答案: