Javascript 如何将Axios的响应数据存储到功能组件中的变量？

我正在使用一个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;

const组件=（道具）=>{
设变量={}；
Agent.API.get（props.id）
。然后（（响应）=>{
变量=response.data}）
报税表（
{variable.name}

)
}
导出默认组件；

---

这是我想要实现的。如何操作？

您想使用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>
    )
}

import React，{useState，useffect}来自“React”
导出默认值（道具）=>{
常量url=https://api.example.com'
const[result，setResult]=useState（null）
useffect（（）=>{
获取（url）
。然后（（响应）=>{
setResult（response.data）
//axios返回.data中的API响应体
})
}，[]）//第二个参数[]是要监视和运行useffect的依赖项列表
报税表（
{result==null？'loading'：result.name}

)
}

如果您不想在每个渲染中播放查询，那么将axios调用放置在带有空依赖项数组的

useffect

中也可能很有用。我已经忘记了。非常感谢。我修正了。如果你没有给

useState

一个

null

默认值，那么

result

不是将是

undefined

，而不是

null

。对不起，我测试不够。谢谢你的检查。