reactjs - 强制 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

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

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

随后的点击将它从 true 更改为 true 这不是更改，所以它没有。

你可以切换它:

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

和

rerender(!render);

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

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