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

Question

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

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

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

Answer 1

您只想从API获取LOCATIONS数据？这样的事情应该可以工作（代码未经测试）

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