通过循环 JSON 数组设置 React 组件的状态

2020-11-01 08:00:00 · 飞浪

本指南介绍如何使用 Axios HTTP 客户端从 API 请求 JSON 数据、接收 JSON 响应、循环遍历其中包含的数据以及根据此数据设置 React 组件的状态。

介绍

JSON、HTTP 和 React 密不可分。在构建 React 应用时，您很可能需要与 JSON 数据数组进行交互。

在本指南中，您将学习如何使用 Axios HTTP 客户端从 API 请求 JSON 数据。然后，您将学习如何接收 JSON 响应、循环遍历此响应包含的数据，并根据此数据设置 React 组件的状态

让我们开始吧！

注意：本指南假设您正在使用create-react-app创建的 React 应用程序内工作。

请求 JSON 数据

循环 JSON 数组的第一部分涉及实际请求数据！要从 API 请求数据，我们必须首先使用 HTTP 客户端。在本指南中，我们选择 Axios 作为我们的 HTTP 客户端库。有很多替代方案！如果您试图限制应用中使用的依赖项数量，Fetch 是一个很棒的本机客户端，您可以使用它。

要下载 Axios，请导航到package.json文件所在的根项目目录，然后运行命令：npm install --save axios。现在，您已在 React 项目中安装了 Axios，可以开始使用它了！

在下面的代码中，您将看到SolarSystem组件的基本外壳。此组件的作用是通过 HTTP 从服务器请求行星列表，然后根据响应呈现Planet组件列表。还需要通过循环遍历响应中包含的 JSON 数组来计算气态巨行星的数量。

      class SolarSystem Extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            planets: [],
            gasGiantsCount: 0
        }
    }

    componentDidMount() {
        ...
    }

    render() {
        ...
    }
}
    

首先，您需要根据componentDidMount生命周期方法中请求的行星列表设置组件的行星状态。componentDidMount生命周期方法将确保仅在SolarSystem组件首次渲染后才请求行星的数据。这很有用，因为您可以在等待请求完成时显示一个简单的加载屏幕。

下面是更新后的代码，展示了如何使用 Axios 向私有行星 API 发出请求。

      import axios from 'axios';

class SolarSystem Extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            planets: [],
            gasGiantsCount: 0
        }
    }

    async componentDidMount() {
        const { data: planets }  = await axios.get(this.props.planetApiUrl),
                  gasGiantsCount = planets.filter(planet => planet.isGasGiant).length;

        this.setState({ planets, gasGiantsCount });
    }

    render() {
        ...
    }
}
    

哇，这很简单！在上面的代码中，您首先导入了 Axios HTTP 客户端库。然后，您将componentDidMount标记为异步函数。这样就可以使用await关键字来解析从对axios.get的调用返回的Promise。

一旦响应成功加载，您就可以访问 Axios 响应对象。Axios 的优点之一是它会自动为您解析 JSON！您可以在响应对象的数据字段上访问此 JSON。在上面的代码中，我们利用 JavaScript 的对象解构功能从响应对象中获取数据字段并将其重命名为planets。在本例中，数据字段包含我们已经解析的 JSON 数组。

获得所需的 JSON 数组后，您可以使用 JavaScript 的数组原型函数之一对其进行循环。在本例中，您可以看到代码循环遍历行星并计算太阳系中气态巨行星的数量。

最后，您使用setState函数来设置组件的planets和gasGiantsCount状态。

请求完数据后，现在该加载视图了。请记住，此组件只是想显示Planet组件列表。这可以通过实现以下渲染函数来实现。

      ...

    render() {
        const { planets, gasGiantsCount } = this.state;

        const planetComponents = planets.map(planet => <Planet name={planet.name} type={planet.type} />);

        return (
            <div>
                <h2>{gasGiantsCount}</h2>
                <ul>{planetComponents}</ul>
            </div>
        )
    }
}
    

结论

使用 JSON 数组是创建任何 Web 应用时的关键技能。在 React 中，您可以使用 Axios 等 HTTP 客户端来帮助您处理 JSON 的自动解析等操作，从而轻松使用 JSON 数组。Axios 等工具可以让您编写更少的代码，从而使您的工作更轻松！

当然，请求 JSON 并不是 Axios 能帮你做的唯一事情。最终，你也会希望在 React 应用中发送 JSON 数组！有关 Axios 的更多信息，请查看 Axios文档。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

通过循环 JSON 数组设置 React 组件的状态

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

class SolarSystem Extends React.Component { constructor(props) { super(props); this.state = { planets: [], gasGiantsCount: 0 } } componentDidMount() { ... } render() { ... } }

import axios from 'axios'; class SolarSystem Extends React.Component { constructor(props) { super(props); this.state = { planets: [], gasGiantsCount: 0 } } async componentDidMount() { const { data: planets } = await axios.get(this.props.planetApiUrl), gasGiantsCount = planets.filter(planet => planet.isGasGiant).length; this.setState({ planets, gasGiantsCount }); } render() { ... } }

... render() { const { planets, gasGiantsCount } = this.state; const planetComponents = planets.map(planet => <Planet name={planet.name} type={planet.type} />); return ( <div> <h2>{gasGiantsCount}</h2> <ul>{planetComponents}</ul> </div> ) } }