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

问题描述

我试图让一个功能组件在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演示。

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

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

标签： reactjs

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

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

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

你可以切换它：

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

和

rerender(!render);

所以它实际上改变了。

……但这闻起来像是一个 XY 问题，你可能应该改变一些实际正在渲染的东西。

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

问题描述

解决方案

推荐阅读