Я использую функциональный компонент 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;

Это то, чего я хочу достичь. Как мне поступить?

0
robo 28 Сен 2020 в 11:51

1 ответ

Лучший ответ

Вы хотите использовать аксиомы, поэтому установите ответ в состоянии.

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>
    )
}
1
Watanabe.N 28 Сен 2020 в 11:18