反应复位useMemo值

Question

我需要重置我的useMemo值在我的反应应用程序，但我不知道如何做。我对设置做了一个最小的例子。基本上，当单击重置按钮时，countDetails值需要为null。

export default function App() {
  const [count, setCount] = React.useState(0);

  const countDetails = React.useMemo(() => {
    if(count === 0) {
      return {
        data: [],
        key: 'index'
      }
    }


    return {
      data: ['hi'],
      key: 'index'
    }
  }, [count]);

  console.log(count, countDetails);

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <button onClick={() => setCount(count + 1)}>Count</button>
      <button>Reset</button> 
    </div>
  );
}

这是编辑器的代码。我不知道如何做到这一点，因为当重置按钮是点击计数变量的问题。所以useMemo不会更新。这是我试图做的一个极小的例子。我的应用程序更复杂，我不能使用将计数设置为9999的标志，然后在useMemo中检查count === 9999，然后返回null。有更好的方法吗？

Answer 1

    const [count, setCount] = React.useState(0);
    let countArr = React.useMemo(() => {
    if (count === 0) {
      return {
        data: [],
        key: "index",
      };
    }

   return {
      data: ["hi"],
      key: "index",
    };
  }, [count]);

  console.log(count, countArr);
  const resetHandler = () => {
    countArr = null;
    console.log(countArr);
  };
  return (
    <div>
      <h1>Hello StackBltz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <button onClick={() => setCount(count + 1)}>Count</button>
      <button onClick={resetHandler}>Reset </button>
    </div>
  );

Answer 2

<button onClick={() => setCount(0)}>Reset</button> 

您的useMemo直接依赖于来自useState的count。我希望我能正确理解，在你的情况下，重置意味着回到零。如果是这样的话，上面的代码就是这样做的，它将计数重置为零。

Answer 3

将计数设置为0

<div>
  <h1>Hello StackBltz!</h1>
  <p>Start editing to see some magic happen :)</p>
  <button onClick={() => setCount(count + 1)}>Count</button>
  <button onClick={() => setCount(0)}>Reset </button>
</div>