Question

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

我构建了一个简单的演示来模拟这个问题，因为使用我的真实应用程序太难演示了，但大概应该适用相同的原则（我的真实演示在函数执行时获取数据并将其显示在页面上，但它没有重新渲染并且我必须刷新页面才能看到新数据，因此我要触发重新渲染）。

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

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

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

随后的点击您将其从 true 更改为 true，这不是更改，因此不会。

你可以切换它：

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

和

rerender(!render);

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

……但这有点像 XY 问题，您可能应该更改实际正在渲染的内容。

Answer 2

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

const [, setCount] = useState(0);

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

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

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

2 个答案: