如何将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，所以将response设置为state。

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>
)
}