如何在基于反应函数的视图中进行api调用[重复]答案

【问题标题】：How to make api call in react function based view [duplicate]如何在基于反应函数的视图中进行api调用[重复]
【发布时间】：2019-11-10 01:32:13
【问题描述】：

import React from 'react'

componentDidMount(){
    fetch(`https://jsonplaceholder.com/users/`)
    .then(res => res.hson())
    .then(res => {
        .console.log(res)
    })
}

const App  = () => {
    return (
        <h1>Hello</h1>
    )
}

export default App;

如何在基于反应函数的视图中进行 api 调用。

这里是说 componentDidMount not found.

有没有办法使用基于函数的视图进行 api 调用。

请看一下

【问题讨论】：

标签： reactjs

【解决方案1】：

componentDidMount 应该在类组件内。

import React, {Component} from 'react'


class App extends Component  {

    componentDidMount(){
    fetch(`https://jsonplaceholder.com/users/`)
    .then(res => res.hson())
    .then(res => {
        .console.log(res)
    })


    render() {
    return (
        <h1>Hello</h1>
    )
}

}

export default App;

【讨论】：

有没有什么方法可以不用类进行api调用？
React 16.8 以后 -> useEffects();这将做同样的事情，但在像你这样的功能组件中。
谢谢阿尼尔。在 useEffects 中我可以将 api 存储在 state 中吗？
我可以在哪里存储 api res？
是的，您可以在 useState() Hook 中存储状态。

【解决方案2】：

React 16.8 有 useEffect Hook。

import React, { useState, useEffect} from 'react';
const App  = () => {
    const [data, setData] = useState('');
    useEffect(() => {
      fetch(`https://jsonplaceholder.com/users/`)
      .then(res => res.hson())
      .then(res => {
       setData(res);
      })
    });
    return (
        <h1>Hello</h1>
    )
}

【讨论】：

谢谢。我可以在哪里存储资源？
你能编辑一下吗？
@soubhagyapradhan 更新了答案