Question

我正在使用React Native Expo Networking从Rest API中获取数据。

根据documentation componentDidMount ，可以在Component类中正常工作，如下所示：

export default class FetchExample extends React.Component {
componentDidMount() {
    return fetch('https://reactnative.dev/movies.json')
      .then(response => response.json())
      .then(responseJson => {
         console.log(responseJson );
      })
      .catch(error => {
        console.error(error);
      });
  }
  render() {
    return (){
    }
  }
}

但是，我正在为组件使用Arrow函数语法，如下所示：

const FetchExample = props => {

   return (
   )
}
export default FetchExample;

在这种情况下如何使用 componentDidMount ？

Answer 1

当您这样声明组件时：

const FetchExample = props => {

   return (
   )
}
export default FetchExample;

您要声明functional component，因此需要使用hooks。

因此，如果您希望获得与componentDidMount相同的行为，则可以执行以下操作：

const FetchExample = props => {

   // Similar to componentDidMount and componentDidUpdate:  
   useEffect(() => {
     Your code here 
   });

   return (
   )
}
export default FetchExample;

箭头功能内的componentDidMount

1 个答案: