react-native - 如何从渲染器访问在“useEffect”挂钩中计算的值

Question

我正在开发一个带有功能组件的 React-Native 项目。

这是一个非常简单的屏幕，它呈现计算结果列表。因为我只需要计算一次，所以我把它放在useEffect钩子里。

import {doCalculation} from '../util/helper'

const MyScreen = ({navigation}) => {
   useEffect(() => {
     // I call a function from a helper module here. 
     // The result is a list of object.
     const result = doCalculation();

     // eslint-disable-next-line
  }, []);

  // renderer
  return (
      <View> 
        // Problem is 'result' is not accessible here, but I need to render it here
        {result.map(item=> <Text key={item.id}> {item.value} </Text>)}
      </View>
  )
}

export default MyScreen;

正如你所看到的，我已经调用了doCalculation()获取result内部useEffect钩子。我的问题是如何在return零件中呈现结果？由于result是在钩子内部计算的，因此无法在渲染器中访问它。

PS 将钩子移到const result = doCalculation()外部useEffect不是一种选择，因为我只需要调用一次计算。

标签： react-nativereact-hooksuse-effect

Answer 1

利用useState保存计算结果，然后使用里面的变量return。请参阅https://reactjs.org/docs/hooks-state.html。