React Rerender 组件不起作用，无法读取未定义的属性“forceUpdate”[重复]

Posted 2023-02-22

【中文标题】React Rerender 组件不起作用，无法读取未定义的属性“forceUpdate”[重复]

【英文标题】：React Rerender component not working, Cannot read property 'forceUpdate' of undefined [duplicate]

【发布时间】：2021-09-24 18:37:36

【问题描述】：

如何让 forceUpdate() 重新渲染组件？我收到以下错误，无法读取未定义的属性“forceUpdate”

function App() 

  const renderData = () => 
    console.log('render');
    this.forceUpdate();
  

  return (
    <div>
      Test
      <button onClick=renderData> render data </button>
    </div>
  );

错误：

TypeError: 无法读取未定义的属性“forceUpdate”

const renderData = () => 
console.log('render');
this.forceUpdate();

资源：Can you force a React component to rerender without calling setState?

【参考方案1】：

this.forceUpdate() 仅适用于class based components

您可以通过更新状态来强制更新：

const [someVar, setSomeVar] = useState(null);

const renderData = () => 
    console.log('render');
    setSomeVar(true);

或者从here 中汲取灵感，创建自己的 forceUpdate 函数：

function useForceUpdate()
    const [value, setValue] = useState(0); // integer state
    return () => setValue(value => value + 1); // update the state to force render

我强烈建议不要这样做，这表明您可能应该以不同的方式构建您的逻辑。