如何在 React 中强制渲染组件

Posted 2023-02-22

【中文标题】如何在 React 中强制渲染组件

【英文标题】：How to force component render in React

【发布时间】：2021-03-05 14:27:16

【问题描述】：

我正在对 API 进行简单的 ajax 调用，该 API 每 5 秒生成一次数据，使用 observables 正确接收数据，并且数据状态按预期更新。 问题是：页面仅在加载时呈现一次，而不是在使用 setData 函数更改日期时呈现。如果我通过导航到另一个链接重新加载页面然后返回数据按预期显示 她是代码：

function MyComponent() 

   const [data, setData] = useState(RxJSStore.getData())

   useEffect(() => 
       RxJSStore.addChangeListener(onChange);
       if (data.length === 0) loadDataRxJSAction()
       return () => RxJSStore.removeChangeListener(onChange)
   , [data.length])


   function onChange() 
       setData(RxJSStore.getData())
   

   return (
       <>
            <List data=data />

       </>
   )

【问题讨论】：

你确定数据变化的长度吗？另外，我认为在 useState 上以默认值启动异步调用不是一个好习惯

thnx Dario，是的，每次我收到来自我的 ajax 调用的新响应时，数据数组的长度都会发生变化（状态在商店中更新，然后在组件中收到，因为我有 onChange () 这将更新数据数组），因此数据数组被正确更新

能否提供一个代码沙箱？

codesandbox.io/s/strange-wescoff-sxbwx?file=/src/…

谢谢，我明天早上去检查一下，我得走了

【参考方案1】：

有一种方法可以在每次调用 onChange 方法时强制组件呈现。文档中写道，这只能用于测试目的，但由于情况没有其他解决方案，这可能是此用例的解决方案。

import  useRefresh  from 'react-tidy'

 function MyComponent() 

 const [data, setData] = useState(RxJSStore.getData())
const refresh = useRefresh()

useEffect(() => 
   RxJSStore.addChangeListener(onChange);
   if (data.length === 0) loadDataRxJSAction()
   return () => RxJSStore.removeChangeListener(onChange)
, [data.length])


  function onChange() 
    setWarnings(RxJSStore.getWarnings())
    refresh()


return (
   <>
        <List data=data />

   </>
 )