如何将 Axios 的响应数据存储到 React Functional Component 中的变量？

Question

我正在使用 React 功能组件。 我想将从 API 接收到的数据存储到变量中，以便我可以在其余代码中使用它。

const Component = (props) =>{
     let variable = {};

     Agent.API.get(props.id)
     .then((response)=>{
       variable = response.data })

     return( 
        <div><p>{variable.name}</p></div>
      )
}
export default Component;

这是我想要实现的目标。 我该怎么办？

Answer 1

您想使用 axios，然后在状态中设置响应。

import React, {useState, useEffect} from 'react'

export default (props) =>{
  const url = 'https://api.example.com'
  const [result, setResult] = useState(null)

  useEffect(() => {
    axios.get(url)
    .then((response)=>{
      setResult(response.data)
      // axios returns API response body in .data
    })
  }, []) // second param [] is a list of dependency to watch and run useEffect

  return( 
    <div><p>{result === null ? 'loading' : result.name}</p></div>
    )
}