作为挂钩输入的静态值

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 实现类似的东西。

const HomeScreen = () => {
const [data, setData] = useState();
//Stand for componentDidMount (empty array dependancies)
useEffect(()=>{
setData(new SomeService());
},[])
useEffect(() => {
console.log('new data is: ' + data);
}, [data]); // I want to trigger this once data changes
return <View> ... </View>
};

Answer 2

默认情况下useEffect每次渲染后运行(如果没有第二个参数(。useEffect的第二个参数用于检查它是否应该重新运行，而不是触发useEffect运行。

在您的情况下，您的static data可能会更改，但没有任何内容会使您的组件重新呈现，因此您的useEffect函数不会运行。

可以将数据设置为状态以使其重新呈现。或者，每当静态数据发生变化时，都会以某种方式触发重新渲染。

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

并将应用包装在数据提供程序中

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