如何在 React 中强制渲染组件

Question

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

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} />

       </>
   )
}

Answer 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} />

   </>
 )
}

如何在 React 中强制渲染组件

How to force component render in React

reactive-programming

flux

rxjs

reactjs