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

正如在随后的重新渲染过程中所述，

useState

返回的第一个值始终是应用更新后的最新状态。但是，我有一个用例，在随后的重新渲染过程中，状态需要重新初始化为props中提供的初始值

将此示例视为我的用例的简化版本：

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>
  );
}

从“React”导入React；
导入“/styles.css”；
函数计数器（{initialCount，handleChange}）{
const[count，setCount]=React.useState（initialCount）；
常量handleClick=（计数器）=>{
设置计数（计数+计数器）；
手变（计数）；
};
返回(
计数器{count}
handleClick（1）}
样式={{marginRight:“8px”}
>
添加
handleClick（-1）}>
减去
);
}
导出默认函数App（）{
const[countOne，setCountOne]=React.useState（1）；
常量[countTwo，setCountTwo]=React.useState（countOne%2）；
返回(
setCountOne（val）}
/>
setCountTwo（val）}
/>
);
}

你也可以检查一下

---

当我增加第一个计数器时，我希望第二个计数器被重置为0或1（无论它是什么状态），这取决于第一个计数器中的计数是偶数还是奇数。请注意，只有单向依赖关系，没有任何循环的单向含义；更改第二个计数器中的计数不应重置第一个计数器中的计数。

来自react组件文档

如果你想在一个道具改变< /强>时重置某个状态，考虑…相反

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

您可以使用

countOne

作为第一个

计数器更新时要重置的第二个
计数器的键。提供
countOne%2
作为第二个
计数器的初始值。删除countTwo的重复状态，因为这是不必要的。并将
handleChange
回调设置为可选，但将新的状态值传递给回调，即
count+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>
  );
}

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

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


您可以使用另一个state属性，或
useRef
创建一个在组件的整个生命周期内都有效的值。谢谢。我不想在这里引入一个键的唯一原因是，它将在
countOne
更改时强制重新创建第二个
。这似乎是一个过度的状态重置。我想知道这是否可以通过类组件中的
componentdiddupdate
来实现。@SibasishMohanty使用react键是一种设计好的机制，用于重置到某个初始状态。您可以在基于类的实现中使用
componentdiddupdate
，或者添加一个
useffect
，其中包含要重置的依赖项。我更新了沙盒以包含第二个版本的
计数器
，现在是
计数器1
和
计数器2
。
<Counter2 reset={countOne} initialCount={countOne % 2} />