Question

我有一个获取服务，该服务异步获取新数据，并且想在获取新数据时更新组件。

为简化起见，假设这是我的设置：

class SomeService {
  static data;

  // can be called by other components (asynchronous)
  static fetchData = async () => {
    data = await someAsynchronousCall() // data gets a new value
  };
}

const HomeScreen = () => {
  useEffect(() => {
    console.log('new data is: ' + SomeService.data);
  }, [SomeService.data]); // I want to trigger this once data changes

  return <View> ... </View>
};

我已经尝试过类似的操作，但是当data发生更改时，useEffect不会被调用。

有没有办法获得想要的行为？

Answer 1

useEffect监听状态更新。 SomeService.data是静态变量。您应该使用Hooks实现类似的操作。

import sequtils

let list = @[1, 2, 4]
echo list.filter do (x: int) -> bool: x > 2

Answer 2

useEffect默认在每个渲染之后运行（如果没有第二个参数）。 useEffect的第二个参数用于检查是否应该重新运行，不要触发useEffect运行。

在您的情况下，您的static data可能会更改，但是没有什么可以使您的组件重新呈现，因此您的useEffect函数将无法运行。

您可以将数据设置为 state ，以使其重新呈现。或者，只要您的静态数据发生更改，就会以某种方式触发重新渲染。

Answer 3

您可以使用上下文api将获取逻辑与组件分开。

import React from 'react'
const DataContext = React.createContext()

function DataProvider({children}) {
  const [data, setData] = React.useState()
  React.useEffect(() => {
    const fetchData = async () => {
      const data = await someAsynchronousCall()
      setData(data)
    };
    fetchData()
  }, [])
  return (
    <DataContext.Provider value={data}>
        {children}
    </CountStateContext.Provider>
  )
}
export {DataProvider, DataContext}

在您的组件中，使用useContext来获取数据

const HomeScreen = () => {
  const data = useContext(DataContext)
  useEffect(() => {
    console.log('new data is: ' + SomeService.data);
  }, [data]); // I want to trigger this once data changes

  return <View> ... </View>
};

并将您的应用包装在DataProvider中

const App = props => {
<DataProvider>
  <HomeScreen />
  {/* other component */}
</DataProvider>
}

静态值作为挂钩输入

3 个答案: