Как отобразить результаты из функции Axios с отображением

Question

Я пытаюсь отобразить результаты функции axios в React.Сопоставление уже определено внутри функции, но я могу только консоль записывать в журнал результаты, определенные в первом 'then'

Я пробовал и componentDidMount (), и просто отображал в результате рендеринга, ноЯ не могу заставить его работать.Я понимаю, что есть другие способы, такие как монтирование результатов в состояние и отображение состояния в компоненте рендеринга, но я пытаюсь получить результаты непосредственно из этой функции getReactResults ().

const API_URL = 'https://api.testapi.com/?query=test';


const getReactResults = () => axios.get(API_URL)
    .then((res) => res.data.items)
      .then((mul) => mul.map(({name, url}) => ({
        name,
        url
      })
    )
  );

class Rel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

 componentDidMount(){
   let results = this.getReactResults();
   console.log(results);
 }

  render(){
    return(
      <div>
        <ul>
          {results.map((item, i) => <li key={i.name}>{i.name </li>)}
        </ul>
       </div>
    )
   }
}

Яполучение ошибки 'result' не определено, но результатом должно быть отображение результатов из API.

Answer 1

Вы можете установить результаты в состоянии вашего компонента после разрешения обещания и использовать this.state.results в методе визуализации.

const getReactResults = () =>
  axios.get(API_URL).then(res =>
    res.data.items.map(({ name, url }) => ({
      name,
      url
    }))
  );

class Rel extends React.Component {
  state = { results: [] };

  componentDidMount() {
    getReactResults().then(results => {
      this.setState({ results });
    });
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.results.map((item, i) => (
            <li key={i}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}