如何将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 中开发的。那么我如何将上面的代码转换为工作反应组件呢？

Answer 1

使用 Fetch API 在 React 中获取数据

组件挂载后始终发出网络请求

如果您使用功能组件，请在内部使用 fetch API

useEffect()

示例：

import {
  useEffect
} from 'react';


const Component = () => {

  useEffect(() => {

    // use fetch inside here

  }, [])

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

export default Component;

如果您使用类组件，请在

componentDidMount()

中使用 fetch API；

此链接中有更多有用的文章

在react中获取数据