React：即使状态没有变化也重新渲染答案

【问题标题】：React: re-render even if there aren't changes in stateReact：即使状态没有变化也重新渲染
【发布时间】：2020-11-05 16:31:07
【问题描述】：

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

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）

【问题讨论】：

您将添加一个 onclick 处理程序，该处理程序 setNumber(0)

标签： javascript reactjs

【解决方案1】：

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

你可以通过添加一个函数来做到这一点：

setNumber(0)

点击Show Text即可执行

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以做到，有两件事要做：

重新触发状态，通过设置对象替换设置值，所以Parent组件也将在每次按下按钮时重新渲染
```
const [state, setState] = useState({});
...
setState({ type: "number" });
```
通过设置唯一的组件键（reference answer for more detail）重新安装预期的组件（即ShowNumber）
```
return <ShowNumber key={`show-number-${new Date().getTime()}`} />;
```

我用新的沙箱 fork 和修改：

【讨论】：

【解决方案4】：

现在，再次点击“显示编号”甚至不会导致父级重新渲染，因为状态不会改变。为了做你想做的事，你需要在 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>
    </>
  );
};

【讨论】：