Как сделать одно изменение состояния только после изменения другого состояния в функциональном компоненте?

Question

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

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

isEditing - это реквизит, пришедший из состояния избыточности. Текст заголовка диалога («Добавить» / «Редактировать») отображается в зависимости от состояния isEditingTool (устанавливается во втором состоянии useState). Состояние isEditing должно изменяться только после закрытия диалога, чтобы текст не изменялся до закрытия диалога. Я перепробовал много вариантов (setTimeout / usePrevious hook / 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>
  );
}