useStateフックセッターが誤って状態を上書きする

ここに問題があります：ボタンのクリックで2つの関数を呼び出そうとしています。どちらの関数も状態を更新します（useStateフックを使用しています）。最初の関数はvalue1を「新しい1」に正しく更新しますが、1秒後に（setTimeout）2番目の関数が起動し、値2を「新しい2」に変更します。これは、value1を「1」に戻します。なんでこんなことが起こっているの？前もって感謝します！

import React, { useState } from "react";

const Test = () => {
  const [state, setState] = useState({
    value1: "1",
    value2: "2"
  });

  const changeValue1 = () => {
    setState({ ...state, value1: "new 1" });
  };
  const changeValue2 = () => {
    setState({ ...state, value2: "new 2" });
  };

  return (
    <>
      <button
        onClick={() => {
          changeValue1();
          setTimeout(changeValue2, 1000);
        }}
      >
        CHANGE BOTH
      </button>
      <h1>{state.value1}</h1>
      <h1>{state.value2}</h1>
    </>
  );
};

export default Test;

閉鎖地獄へようこそ。この問題setStateは、stateが呼び出されるたびに新しいメモリ参照を取得するために発生しますが、関数changeValue1とchangeValue2は、閉鎖のために古い初期state参照を保持します。

setStatefrom を確実にし、最新の状態changeValue1をchangeValue2取得するソリューションは、コールバックを使用することです（以前の状態をパラメーターとして持っています）。

import React, { useState } from "react";

const Test = () => {
  const [state, setState] = useState({
    value1: "1",
    value2: "2"
  });

  const changeValue1 = () => {
    setState((prevState) => ({ ...prevState, value1: "new 1" }));
  };
  const changeValue2 = () => {
    setState((prevState) => ({ ...prevState, value2: "new 2" }));
  };

  // ...
};

この閉鎖の問題に関するより広範な議論は、こことここにあります。

関数は次のようになります。

const changeValue1 = () => {
    setState((prevState) => ({ ...prevState, value1: "new 1" }));
};
const changeValue2 = () => {
    setState((prevState) => ({ ...prevState, value2: "new 2" }));
};

したがって、アクションが発生したときに前の状態を使用することにより、現在の状態の既存のプロパティが欠落していないことを確認します。また、したがって、クロージャを管理する必要がなくなります。

ときにchangeValue2呼び出され、状態のターンはinital状態に戻りので、初期状態が保持され、その後、value2プロパティが書かれています。

その後次回changeValue2呼び出されたときに状態を保持している{value1: "1", value2: "new 2"}ため、value1プロパティは上書きされます。

setStateパラメータには矢印関数が必要です。

const Test = () => {
  const [state, setState] = React.useState({
    value1: "1",
    value2: "2"
  });

  const changeValue1 = () => {
    setState(prev => ({ ...prev, value1: "new 1" }));
  };
  const changeValue2 = () => {
    setState(prev => ({ ...prev, value2: "new 2" }));
  };

  return (
    <React.Fragment>
      <button
        onClick={() => {
          changeValue1();
          setTimeout(changeValue2, 1000);
        }}
      >
        CHANGE BOTH
      </button>
      <h1>{state.value1}</h1>
      <h1>{state.value2}</h1>
    </React.Fragment>
  );
};

ReactDOM.render(<Test />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

何が起こっているかというと、changeValue1とで作成されたレンダーからchangeValue2の状態がわかるため、コンポーネントが初めてレンダーしたときに、これらの2つの関数は次のように見えます。

state= {
  value1: "1",
  value2: "2"
}

ボタンをクリックすると、changeValue1最初にが呼び出され、状態が{value1: "new1", value2: "2"}期待どおりに変更されます。

ここで、1秒後、changeValue2が呼び出されますが、この関数はまだ初期状態（{value1; "1", value2: "2"}）を参照しているため、この関数が状態を次のように更新すると、

setState({ ...state, value2: "new 2" });

最終的には次のようになります{value1; "1", value2: "new2"}。

ソース