Reactjs GatsbyJS 从 Restful API 获取数据

  import React from 'react'
  import Link from 'gatsby-link'

  class User extends React.Component {
    constructor(){
      super();
      this.state = {
        pictures:[],
      };

    }

    componentDidMount(){
      fetch('https://randomuser.me/api/?results=500')
      .then(results=>{
        return results.json();
      })
      .then(data=>{
        let pictures = data.results.map((pic,i)=>{
            return(
              <div key={i} >
                <img key={i} src={pic.picture.medium}/>
              </div>
            )
        })
        this.setState({pictures:pictures})
      })
    }

    render() {
      return (<div>{this.state.pictures}</div>)
    }
  }

  export default User;

 const [starsCount, setStarsCount] = useState(0)
  useEffect(() => {
    // get data from GitHub api
    fetch(`https://api.github.com/repos/gatsbyjs/gatsby`)
      .then(response => response.json()) // parse JSON from request
      .then(resultData => {
        setStarsCount(resultData.stargazers_count)
      }) // set data for the number of stars
  }, [])

Reactjs相关问答推荐

使用useEffect挂钩获取数据

cypress 不能点击SPAN

使用Reaction-Hook-Form时未激发React.js onBlur事件

在每页上应用字体-NextJS

无法找出状态正在被更改的位置

React-React中是否完全支持基于类的组件？

为什么React UseEffect挂钩在页面重新加载时运行

React-apexcharts 中的 Y 轴刻度不会动态更新符号

React Todo List 应用程序我在实现删除功能时遇到问题

如何在 React 过滤器中包含价格过滤器逻辑？

无法访问 usefocusEffect 中 const 的更新状态

VideoSDK api 不使用更新状态

在 React JS 中编辑表格数据

从服务器获取数据时未定义，错误非法调用

如何避免在 react useEffect 上滚动时出现小的延迟？

如何在react 中更新子组件中的变量？

在 redux 中分派到另一个减少时状态值不会改变

React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

为什么我在此代码段中看不到 useEffect for count = 1？

如何在 Cypress E2E 的站点上测试react 组件？