React native 如何将Fetch转换为Axios，将Class组件转换为Functional组件？

如何将Fetch转换为Axios，将Class组件转换为Functional组件

我想学习在React native中使用functional component和axios实现无限滚动，但由于参考文档由类组件和fetch组成，因此很难应用

import React from 'react';
import {
  View,
  Image,
  Text,
    FlatList, // here
} from 'react-native';

export default class App extends React.Component {

  state = {
    data: [],
    page: 1 // here
  }

  _renderItem = ({item}) => (
    <View style={{borderBottomWidth:1, marginTop: 20}}>
      <Image source={{ uri: item.url }} style={{ height: 200}} />
      <Text>{item.title}</Text>
      <Text>{item.id}</Text>
    </View>
  );

  
  _getData = () => {
    const url = 'https://jsonplaceholder.typicode.com/photos?_limit=10&_page=' + this.state.page;
    fetch(url)
      .then(r => r.json())
      .then(data => {
        this.setState({ 
          data: this.state.data.concat(data),
          page: this.state.page + 1
        })
      });
  }

  componentDidMount() {
    this._getData();
  }

  // here
  _handleLoadMore = () => {
    this._getData();
  }

  render() {
    return (
      <FlatList 
        data={this.state.data}
        renderItem={this._renderItem}
        keyExtractor={(item, index) => item.id}
        onEndReached={this._handleLoadMore}
        onEndReachedThreshold={1}
      />
    );
  }
}

从“React”导入React；
进口{
看法
形象,，
文本，
平面列表，//这里
}从“反应本机”；
导出默认类App扩展React.Component{
状态={
数据：[]，
页码：1//此处
}
_renderItem=（{item}）=>(
{item.title}
{item.id}
);
_getData=（）=>{
常量url=https://jsonplaceholder.typicode.com/photos?_limit=10&_page=“+this.state.page；
获取（url）
.then（r=>r.json（））
。然后（数据=>{
这个.setState（{
数据：this.state.data.concat（数据），
页面：this.state.page+1
})
});
}
componentDidMount（）{
这是。_getData（）；
}
//这里
_handleLoadMore=（）=>{
这是。_getData（）；
}
render（）{
返回(
项目id}
onEndReached={this.\u handleLoadMore}
onEndReachedThreshold={1}
/>
);
}
}

从类转换为函数组件时，有几个步骤与此相关：

• 用

  useffect

  替换生命周期事件，如

  componentDidMount

• 用一个或多个

  useState

  hook替换组件状态
• 将类方法转换为普通函数
• 删除对该的所有引用
• 删除

  render（）

方法

\u renderItem

、

\u getData

和

\u handleLoadMore

基本不变。它们只是成为

const

变量，而不是类属性

下面是从类到函数组件的直接转换：

import React, { useEffect, useState } from 'react';
import {
  View,
  Image,
  Text,
  FlatList,
} from 'react-native';

export default function App() {
  const [page, setPage] = useState(1);
  const [data, setData] = useState([]);

  const _renderItem = ({ item }) => (
    <View style={{ borderBottomWidth: 1, marginTop: 20 }}>
      <Image source={{ uri: item.url }} style={{ height: 200 }} />
      <Text>{item.title}</Text>
      <Text>{item.id}</Text>
    </View>
  );

  const _getData = () => {
    const url =
      'https://jsonplaceholder.typicode.com/photos?_limit=10&_page=' + page;
    fetch(url)
      .then((r) => r.json())
      .then((data) => {
        setData(data.concat(data));
        setPage(page + 1);
      });
  };

  const _handleLoadMore = () => {
    _getData();
  };

  // useEffect with an empty dependency array replaces componentDidMount()
  useEffect(() => _getData(), []);

  return (
    <FlatList
      data={data}
      renderItem={_renderItem}
      keyExtractor={(item, index) => item.id}
      onEndReached={_handleLoadMore}
      onEndReachedThreshold={1}
    />
  );
}

--它可以在我的设备上运行，但无限滚动在web预览中似乎不起作用

您还可以进行更多“高级”改进：

• 使用前一状态的回调设置状态，以确保值始终正确<代码>设置页面（当前=>当前+1）

  设置数据（当前=>当前.concat（res.data））

• 使用

  useCallback

  进行记忆，以便像

  \u renderItem

  这样的函数在重新渲染时保持恒定的引用
• 详尽的

  useffect

  依赖项（需要记录）

import React, { useEffect, useState } from 'react';
import { View, Image, Text, FlatList } from 'react-native';
import axios from 'axios';

export default function App() {
  const [page, setPage] = useState(1);
  const [data, setData] = useState([]);

  const _renderItem = ({ item }) => (
    <View style={{ borderBottomWidth: 1, marginTop: 20 }}>
      <Image source={{ uri: item.url }} style={{ height: 200 }} />
      <Text>{item.title}</Text>
      <Text>{item.id}</Text>
    </View>
  );

  const _getData = async () => {
    const url =
      'https://jsonplaceholder.typicode.com/photos?_limit=10&_page=' + page;
    const res = await axios.get(url);
    setData(data.concat(res.data));
    setPage(page + 1);
  };

  const _handleLoadMore = () => {
    _getData();
  };

  // useEffect with an empty dependency array replaces componentDidMount()
  useEffect(() => {
    // put async functions inside curly braces to that you aren't returing the Promise
    _getData();
  }, []);

  return (
    <FlatList
      data={data}
      renderItem={_renderItem}
      keyExtractor={(item, index) => item.id}
      onEndReached={_handleLoadMore}
      onEndReachedThreshold={1}
    />
  );
}