我正在尝试让一个功能组件在 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为了方便演示。
谁能解决这个演示或想出更好的实现方法?
在此感谢您的帮助。
最佳答案
当状态改变时,它会触发重新渲染。
第一次单击按钮时,状态从 false
更改为 true
,因此会触发重新渲染。
随后的点击将它从 true
更改为 true
这不是更改,所以它没有。
你可以切换它:
const [render, rerender] = useState(false);
和
rerender(!render);
所以它实际上发生了变化。
…但这听起来像是一个 XY 问题,您可能应该更改实际正在渲染的内容。
https://stackoverflow.com/questions/66014437/