将状态重置为初始值而不是最近更新的状态

Question

如后续重新渲染期间的文档中所述，返回的第一个值useState将始终是应用更新后的最新状态。但是，我有一个用例，其中状态需要在后续重新渲染期间重新初始化为道具中提供的初始值。将此示例视为我的用例的简化版本：import React from "react";import "./styles.css";function Counter({ initialCount, handleChange }) {  const [count, setCount] = React.useState(initialCount);  const handleClick = (counter) => {    setCount(count + counter);    handleChange(count);  };  return (    <>      <h1>Counter {count}</h1>      <button        type="button"        onClick={() => handleClick(1)}        style={{ marginRight: "8px" }}      >        Add      </button>      <button type="button" onClick={() => handleClick(-1)}>        Subtract      </button>    </>  );}export default function App() {  const [countOne, setCountOne] = React.useState(1);  const [countTwo, setCountTwo] = React.useState(countOne % 2);  return (    <div className="App">      <Counter        initialCount={countOne}        handleChange={(val) => setCountOne(val)}      />      <Counter        initialCount={countTwo}        handleChange={(val) => setCountTwo(val)}      />    </div>  );}您也可以检查代码和框。当我增加第一个计数器时，我希望将第二个计数器重置为 0 或 1（无论它是什么状态），具体取决于第一个计数器中的计数是偶数还是奇数。请注意，只有单向依赖，没有任何循环的意义；更改第二个计数器中的计数不应重置第一个计数器中的计数。

Answer 1

来自 React 组件文档

如果您想在 prop 更改时“重置”某些状态，请考虑......用键完全不受控制。

在要重置为初始状态的组件上使用反应键。

当第一个更新时，您可以将其用作要重置的countOne第二个的密钥。提供作为第二个的初始值。删除重复的状态，因为它是不必要的。并使回调可选，但将新的状态值传递给回调，即，或使用效果来处理它，否则状态值将不同步。CounterCountercountOne % 2CountercountTwohandleChangecount + counter

function Counter({ initialCount, handleChange }) {

  const [count, setCount] = React.useState(initialCount);

  const handleClick = (counter) => {

    setCount(count + counter);

    handleChange && handleChange(count + counter);

  };

  // or

  useEffect(() => {

    handleChange && handleChange(count);

  }, [count, handleChange]);

  const handleClick = (counter) => {

    setCount(count + counter);

  };

  return (

    <>

      <h1>Counter {count}</h1>

      <button

        type="button"

        onClick={() => handleClick(1)}

        style={{ marginRight: "8px" }}

      >

        Add

      </button>

      <button type="button" onClick={() => handleClick(-1)}>

        Subtract

      </button>

    </>

  );

}

export default function App() {

  const [countOne, setCountOne] = React.useState(1);

  return (

    <div className="App">

      <Counter

        initialCount={countOne}

        handleChange={setCountOne}

      />

      <Counter

        key={countOne}

        initialCount={countOne % 2}

      />

    </div>

  );

}

如果您不想使用反应键来重置为初始状态，那么您可以提供另一个道具作为第二个useEffect钩子中的依赖项以重置为提供的initialValue道具。

function Counter2({ initialCount, handleChange, reset }) {

  const [count, setCount] = React.useState(initialCount);

  useEffect(() => {

    handleChange && handleChange(count);

  }, [count, handleChange]);

  useEffect(() => {

    setCount(initialCount);

  }, [reset, initialCount]);

  const handleClick = (counter) => {

    setCount(count + counter);

  };

  return (

    <>

      <h1>Counter 2: {count}</h1>

      <button

        type="button"

        onClick={() => handleClick(1)}

        style={{ marginRight: "8px" }}

      >

        Add

      </button>

      <button type="button" onClick={() => handleClick(-1)}>

        Subtract

      </button>

    </>

  );

}

传递countOne给reset道具，以便在更新时重置计数countOne。

<Counter2 reset={countOne} initialCount={countOne % 2} />