Reactjs 将基于类的Axios请求集成到基于钩子的代码中

如何将这个基于类的Axios请求集成到从Json文件获取数据的其他基于钩子的代码中？基本上，我想用Axios get请求替换数据源位置。谢谢

componentDidMount () {
  axios.get('http://192.168.2.94:3000/list-places').then(res => {
    this.setState({
      posts: res.data
    })
  })
}

从“../data/data”导入{LOCATIONS}
常量主屏幕=道具=>{
const renderGridItem=itemData=>{
返回(
{
props.navigation.navigate({
routeName:“类别”，
参数：{
locationId:itemData.item.id
}
})
}}
/>
)
}
返回(
项目id}
数据={LOCATIONS}
renderItem={renderGridItem}
/>
)
}

您只想从API获取位置数据吗？类似的东西应该可以工作（代码未经测试）

const主屏幕=道具=>{
const[locations，setLocations]=useState（未定义）；
useffect（（）=>{
异步函数getLocations（）{
const{data}=await axios.get（'http://192.168.2.94:3000/list-地方);；
设置位置（数据）；
}
getLocations（）；
}, []);
// ...
返回(
{地点&&(
项目id}
数据={locations}
renderItem={renderGridItem}
/>
)}
);
};

什么是{locations&&（…）}平面列表组件在locations对象未定义之前不会呈现

import { LOCATIONS } from '../data/data'

    const HomeScreen = props => {
      const renderGridItem = itemData => {
        return (
          <CategoryGridTile
            image={itemData.item.image}
            title={itemData.item.title}

            onSelect={() => {
              props.navigation.navigate({
                routeName: 'Categories',
                params: {
                  locationId: itemData.item.id
                }
              })
            }}
          />
        )
      }

      return (
        <FlatList
          keyExtractor={(item, index) => item.id}
          data={LOCATIONS}
          renderItem={renderGridItem}
        />
      )
    }

const HomeScreen = props => {
  const [locations, setLocations] = useState(undefined);

  useEffect(() => {
    async function getLocations() {
      const { data } = await axios.get('http://192.168.2.94:3000/list-places');
      setLocations(data);
    }
    getLocations();
  }, []);

// ...

  return (
    <>
      {locations && (
        <FlatList
          keyExtractor={(item, index) => item.id}
          data={locations}
          renderItem={renderGridItem}
        />
      )}
    </>
  );
 };