在 componentDidMount 中从一个 axios 获取数据到另一个

在 React 中，我们经常需要通过 axios 来获取数据。将数据从一个组件传递到另一个组件也是常见的需求。在 componentDidMount 中获取数据并传递给另一个组件是一种常用的方式。本文将介绍如何在 React 中使用 axios 获取数据，并将数据传递到另一个组件中。

从 axios 获取数据

我们首先需要安装 axios：

npm install axios

在我们要获取数据的组件中，我们需要导入 axios：

import axios from 'axios';

然后，在 componentDidMount 方法中，我们可以使用以下代码来获取数据：

componentDidMount() {
  axios.get('https://api.example.com/data')
    .then(response => {
      this.setState({ data: response.data });
    })
    .catch(error => {
      console.error(error);
    });
}

在这个例子中，我们使用了 axios 的 get 方法来获取数据。在获取数据成功后，我们将数据存储在组件的状态中，以便稍后传递给另一个组件。

将数据传递给另一个组件

一旦我们获取到数据并将其存储在组件的状态中，我们就可以将数据传递给另一个组件了。为了演示这一点，我们将创建一个简单的 List 组件，它将显示传递给它的数据。

我们可以使用以下代码来创建 List 组件：

function List(props) {
  const { items } = props;

  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

在这个例子中，我们将 List 组件定义为一个简单的函数式组件，它将 items 作为 Props，将每个项目显示为一个列表项。

现在，我们可以在我们获取数据的组件中渲染 List 组件，并将数据传递给它：

render() {
  const { data } = this.state;

  return (
    <div>
      {data && <List items={data} />}
    </div>
  );
}

在这个例子中，我们使用 && 运算符来检查 data 是否存在。如果存在，我们将 List 组件渲染为子组件，并将 data 作为 items 的值传递给它。

总结

在本文中，我们介绍了如何在 React 中使用 axios 获取数据，并将其传递给另一个组件。我们使用 componentDidMount 方法来获取数据，将其存储在组件的状态中，并将数据作为 Props 传递给另一个组件。这是 React 中一种常见的数据获取和传递方法。