如何在功能组件中更改其他 state 后才更改一个 state？

Question

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

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

isEditing is a prop, coming from redux state. The Dialog Title ("Add"/"Edit") Text is shown based on isEditingTool state (being set in the second useState). The isEditing state should change only after the dialog has been closed, so that the text doesn't change before dialog close. I have tried a lot of options (setTimeout/usePrevious hook/useLayoutEffect), but its not working. Is there any way out, the only option left would be to make separate components, which I dont want. Here I am using two states, setting isEditingTool only after dialog has been closed. there will be two different renders as per my understanding.

Answer 1

I have implemented the solution here: https://codesandbox.io/s/frosty-fire-xz1pt?file=/src/App.js

With hooks, we can update one state after updating another state by using 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>
  );
}