时间戳

首页 > 解决方案 > 如何将 vanilla js 获取代码转换为反应？

javascript - 如何将 vanilla js 获取代码转换为反应？

问题描述

我用 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);
  });}

这段代码在香草中工作，但我正在开发的应用程序是在反应中开发的。那么如何将上面的代码转换为工作反应组件呢？

标签： javascriptreactjsfetchfetch-api

解决方案

使用 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 ；

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

推荐阅读