javascript - react : re-render even if there aren't changes in state

好的，我知道组件会在状态更改时重新呈现，但是如果我想重置状态怎么办。看看下面的例子:

const Parent = ({ type }) => {
  switch (type) {
    case "number":
      return <ShowNumber />;
    case "text":
      return <ShowText />;
    default:
      return <h1>nothing to do here</h1>;
  }
};

const ShowNumber = () => {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button
        onClick={() => {
          setNumber(prevNumber => prevNumber + 1);
        }}
      >
        Update number from child
      </button>
    </>
  );
};

const ShowText = () => {
  return <h1>{"Hello world"}</h1>;
};

export default () => {
  const [type, setStype] = useState("");

  return (
    <>
      <Parent type={type} />

      <button
        onClick={() => {
          setStype("number");
        }}
      >
        Show number
      </button>

      <button
        onClick={() => {
          setStype("text");
        }}
      >
        Show text
      </button>
    </>
  );
};

如果我更新我的号码并单击“显示文本”，则会调用 ShowText 组件。当然，如果我回到 ShowNumber 组件，我的号码又回到了 cero。
但是如果我想在不切换的情况下重置数字(或任何其他与状态相关的东西)怎么办(例如，每次我按下按钮“显示数字”让我的数字回到 cero)

最佳答案

你可以做到这一点，有两件事要做:

重新触发状态，通过设置对象替换设置值，因此每次按下按钮时 Parent 组件也会重新渲染

const [state, setState] = useState({});
...
setState({ type: "number" });

通过设置唯一组件键( reference answer for more detail )重新安装预期组件(即 ShowNumber )

return <ShowNumber key={`show-number-${new Date().getTime()}`} />;

我 fork 并使用新沙箱进行了修改:

关于javascript - react : re-render even if there aren't changes in state，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62927345/