如何使用反應鈎子重置和重新渲染組件

Question

我是 React Hooks 的新手。

單擊按鈕后，我一直在重新渲染。

我的例子

在我的示例中，有兩個按鈕。 一種是增加計數，另一種是刪除內容。 當我單擊remove按鈕時，內容變為 null 以重置計數。

我想嘗試的是使用新計數顯示新內容，當單擊render按鈕時該計數為零。

但是，問題是當我單擊render按鈕時，它什么也沒顯示。

我相信原因是因為我設置null以刪除我的條件中邏輯不正確的內容。 我已經查看了與此問題相關的其他問題，但我還沒有找到任何合適的方法來解決它。

任何人都可以幫我解決這個問題嗎？

Answer 1

來自 useState 掛鈎的 state 來源屬於 App 組件。 您正在做的是根據您當前的應用程序 state 有條件地渲染此組件的一部分。 據我所知，您必須手動設置計數（0）才能清潔 state。 不可能從內到外解構組件。 使用 useEffect 可以檢查組件的構造和銷毀時間。

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

Answer 2

我想嘗試的是使用新計數顯示新內容，當單擊渲染按鈕時該計數為零。

您可以在抽象組件上使用 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 state 切換新的 React 鍵，以便使用初始 state 重新安裝Counter 。

function App() {
  const [render, setRender] = useState(true);

  return (
    <div className="App">
      <Counter key={render} />
      <button onClick={() => setRender(!render)}>
        remove
      </button>
    </div>
  );
}

演示