如何将vanilla js fetch 代码变成react？

Question

我在 Vanilla JS 中编写了这段代码

function MovieGrid() {
fetch(apiUrl)
  .then(function(res){
    return res.json();
  })
  .then(function(data) {
    console.log(data);
    return( `<ul>
    <li><img src="https://image.tmdb.org/t/p/w185/${data.results.poster_path}" alt="" /></li>
    <li>${data.results.title}</li>
    </ul>`)
  })
  .catch(function(err){
    console.log(err);
  });}

这段代码适用于 vanilla，但我正在开发的应用程序是在 react 中开发的。 那么如何将上面的代码转换为可工作的 React 组件呢？

Answer 1

使用 Fetch API 在 React 中获取数据

组件安装后总是发出网络请求

如果您使用功能组件，请在useEffect()使用 fetch API

例子：

import {
  useEffect
} from 'react';


const Component = () => {

  useEffect(() => {

    // use fetch inside here

  }, [])

  return (
    // .... JSX Element
  )
}

export default Component;

如果您使用的是类组件，请在componentDidMount()使用 fetch API；

此链接中更有用的文章在反应中获取数据