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

Question

好的，我知道当状态改变时组件会被重新渲染，但是如果我想重置状态怎么办。看看下面的例子:

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)

Answer 1

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

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

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

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

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

我用新的沙箱进行了 fork 和修改: