强制 React 功能组件触发重新渲染

Question

我试图让一个功能组件在testFn执行时强制重新渲染。我想使用状态来做到这一点（如果有更好的方法，请大声说出来），这似乎成功地强制重新渲染，但只有两次，然后什么也没有。

我构建了一个简单的演示来模拟该问题，因为使用我的真实应用程序太难演示，但应该应用相同的原则（我的真实演示在函数执行时获取数据并将其显示在页面上，但它没有重新渲染，我有刷新页面以查看新数据，这就是为什么我想触发重新渲染）。

import React, { useState } from "react";

const App = () => {
  const [, rerender] = useState(false);

  const testFn = () => {
    console.log("test Fn");
    rerender(true);
  };

  return (
    <div>
      <p>test</p>
      <button onClick={testFn}>clickk</button>
      {console.log("render")}
    </div>
  );
};

export default App;

为了方便起见，我还制作了一个Stackblitz演示。

任何人都可以解决这个演示或想出更好的实现方法吗？

感谢您在这里的任何帮助。

Answer 1

当状态改变时它会触发重新渲染。

\n

第一次单击按钮时，会将状态更改为 ，false以便true触发重新渲染。

\n

随后的单击会将其更改为true未true更改的位置，因此不会发生更改。

\n

你可以切换它：

\n

const [render, rerender] = useState(false);\n

\n

和

\n

rerender(!render);\n

\n

所以它实际上发生了变化。

\n

\xe2\x80\xa6 但这听起来像是 XY 问题，您可能应该更改实际正在渲染的内容。

\n

Answer 2

状态是正确的方法，因为状态更改是导致重新渲染的主要方法。我会增加一个计数器：

const [, setCount] = useState(0);

// force a re-render by running:
setCount(c => c + 1)

但这仍然是一件非常奇怪的事情。几乎在所有情况下，都可以实现更优雅的解决方案，例如将更改的数据放入状态，并在数据更新时调用状态设置器。