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组件，我的号码又回到了0。

但是如果我想在不进行切换的情况下重设号码（或任何其他与状态相关的东西）怎么办（例如，每当我按下“显示号码”按钮使我的号码回到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()}`} />;

我用新的沙箱进行了分叉和修改：

Answer 2

现在，第二次单击“显示编号”甚至不会导致父级重新提交，因为状态不会改变。要执行您想要的操作，您将需要在Parent中添加一些其他状态，例如每次点击都会更改的计数器。然后，您可以将其设置为ShowNumber上的键，并且键的更改将导致状态重置。这是更新的代码。

const Parent = ({ type, count }) => {
  switch (type) {
    case "number":
      return <ShowNumber key={count} />;
    case "text":
      return <ShowText key={count} />;
    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("");
  const [count, setCount] = useState(0);

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

      <button
        onClick={() => {
          setCount(count => count + 1);
          setStype("number");
        }}
      >
        Show number
      </button>

      <button
        onClick={() => {
          setCount(count => count + 1);
          setStype("text");
        }}
      >
        Show text
      </button>
    </>
  );
};

Answer 3

如评论中所述，您应该仅在处理程序中重置状态。从技术上讲，重新渲染不会重置状态，因为组件会在每次状态更改时重新渲染，但这并不能将其清除。您正在考虑的是卸载和重新安装在刷新页面或离开并返回时所发生的组件。最好的解决方案是将状态设置为原始值。

Answer 4

在这种情况下，您必须将状态重置为0。

您可以通过添加功能来做到这一点：

setNumber(0)

单击Show Text

即可执行

反应：即使状态没有变化也要重新渲染

4 个答案: