Javascript 如何使用react钩子重置和重新渲染组件

我是个新手

单击按钮后，我一直在重新渲染

在我的示例中，有两个按钮。一个是增加计数，另一个是删除内容。当我单击

删除

按钮时，内容变为空以重置计数

我想尝试的是，当单击

render

按钮时，显示新内容的新计数为零

但是，问题是当我单击

render

按钮时，它没有显示任何内容

我认为原因是我设置了

null

，以删除逻辑上不正确的条件中的内容。我已经研究了与这个问题相关的其他问题，但是我还没有找到任何合适的方法来解决它

---

有谁能帮我弄清楚这个问题吗？

来自useState钩子的state provenent属于应用程序组件。您所做的是基于当前应用程序状态有条件地呈现此组件的一部分。据我所知，您必须手动设置计数（0）才能使您的状态保持干净。从内到外分解组件是不可能的。 使用useEffect可以检查组件的构造和销毁时间

useEffect(() => {
  console.log('constructed');
  return () => {
    console.log('destructed');
  }
}, []);

---

useState钩子中的状态provenent属于应用程序组件。您所做的是基于当前应用程序状态有条件地呈现此组件的一部分。据我所知，您必须手动设置计数（0）才能使您的状态保持干净。从内到外分解组件是不可能的。 使用useEffect可以检查组件的构造和销毁时间

useEffect(() => {
  console.log('constructed');
  return () => {
    console.log('destructed');
  }
}, []);

我想尝试的是用新计数显示新内容 单击“渲染”按钮时，该值为零

您可以在抽象组件上使用React键，该键在更新时通知React它是一个“新”组件，旧组件应该卸载，新组件应该装载，本质上是重置它

例如：

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello CodeSandbox {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

演示

我想尝试的是用新计数显示新内容 单击“渲染”按钮时，该值为零

您可以在抽象组件上使用React键，该键在更新时通知React它是一个“新”组件，旧组件应该卸载，新组件应该装载，本质上是重置它

例如：

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello CodeSandbox {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

演示

---

根据上面链接的示例，您的

渲染功能永远不会改变，因此删除数据后，您将无法渲染数据。您只需将
render
按钮的
onClick
更新为
onClick={（）=>setRender（！render）}
。根据上面链接的示例，您的
render
功能永远不会更改，因此一旦数据被删除，您将无法呈现数据。您只需将
render
按钮的
onClick
更新为
onClick={（）=>setRender（！render）}
。