获取 Axios 响应数据 React答案

【问题标题】：Getting Axios Response Data React获取 Axios 响应数据 React
【发布时间】：2021-07-27 02:28:18
【问题描述】：

我一直在尝试进行 api 调用并将数据作为数组接收回来，以迭代数组并填充反应组件。问题是我只收到了承诺，因此反应不会让我使用地图功能。我较新的反应并且无法理解问题。

我正在按如下方式进行 axios 调用：

const makeRequest = async (url) => {
  return await axios.get(url).then(response => response.data);
}

然后尝试将数组响应保存在要迭代的变量中。

let data = makeRequest("someUrl");

如果我在请求中有console.log() 调用，我可以获得数组，但是一旦我尝试将它保存到变量中，我只会得到承诺。任何帮助都会非常感谢您！

【问题讨论】：

标签： reactjs promise axios

【解决方案1】：

您需要使用状态变量来处理异步数据。

在您的组件中，您可以从状态变量迭代数组，因此一旦您的数据准备就绪，您就可以更新状态变量，您的组件将自动重新渲染。

import React, { useEffect, useState } from "react";
import axios from "axios";

function DisplayData() {
  // initialize data state variable as an empty array
  const [data, setData] = useState([]);

  // make the fetch the first time your component mounts
  useEffect(() => {
    axios.get(url).then(response => setData(response.data));
  }, []);

  return (
    <div>
      {data.map((row) => (
        <p key={row.id}>{row.content}</p>
      ))}
    </div>
  );
}

【讨论】：

非常感谢！这解决了我的问题，无需不断重新渲染，非常感谢
@BrandonGullion 在最新版本的反应中，从 useEffect 返回一个承诺会引发错误，我已经更新了我的答案以反映这一点

【解决方案2】：

请参考下面的例子，这可能有用：

// api.js
import axios from 'axios';

export default axios.create({
  baseURL: `xyz`
});

// PersonList
import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState({ id: event.target.value });
  }

  handleSubmit = async event => {
    event.preventDefault();

    const response = await API.get(`xyz`);
    console.log(response);
    console.log(response.data);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person ID:
            <input type="text" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
<div>

【讨论】：