在 React 中将 Promise 中的值添加到动态数据列表中

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

本指南将演示如何从远程 API 获取数据，然后使用 setState 函数更新组件的状态。

介绍

为了使用 React 构建实时、动态的应用程序，您不可避免地需要根据通过外部 API 进入系统的数据来更新组件内的数据列表/数组。

本指南将演示如何从远程 API 获取数据，然后使用setState函数更新组件的状态。

让我们开始吧！

使用 Promises 动态更新状态

Promises 用于在 JavaScript 代码中建模异步操作。在此示例中，您将看到如何将 Promises 与内置的 JavaScript Fetch API 结合使用来创建 HTTP 请求。

React 在组件上提供的setState函数允许您异步设置组件的状态。然后，React 将触发组件视图的重新渲染（如果适用）。

下面，您将看到一些在 React 组件中实现轮询的示例代码。该代码每五秒从外部 API 请求一个新的数据点，然后在组件卸载时停止轮询。

      class DynamicArrayComponent Extends React.Component {
    constructor(props) {
        super(props);
        this.interval;

        this.state = {
            dataPoints: this.props.dataPoints || [] // Set the initial state
        }
    }


    componentWillMount() {
        // Make the first request and then start polling.
        this.requestLatest();
        this.startPolling();
    }

    componentWillUnmount() {
        this.stopPolling();
    }

    requestLatest = () => {
        fetch(this.props.API_URL)
            .then(response => response.json())
            .then(dataPoint =>
                this.setState({
                    dataPoints: this.state.dataPoints.concat(dataPoint)
                })
            );
    }

    startPolling = () => this.interval = setInterval(this.requestLatest, 5000)

    stopPolling = () => {
        if (this.interval) {
            clearInterval(this.interval);
        }
    }

    // ....
}
    

上述代码的第一部分，在构造函数中，设置了初始dataPoints状态并创建了一个内部组件属性，用于跟踪要创建的间隔。

componentWillMount组件生命周期方法使用requestLatest和startPolling方法对数据进行初始请求，然后开始轮询。这是必要的，因为当您在 JavaScript 中使用setInterval时，它不会立即调用您传递给它的函数。

让我们仔细看看requestLatest方法：

      requestLatest = () => {
    fetch(this.props.API_URL)
        .then(response => response.json())
        .then(dataPoint =>
            this.setState({
                dataPoints: this.state.dataPoints.concat(dataPoint)
            })
        );
}
    

假设外部 API 设置为每五秒发出一个新数据点，则上述代码将获取该新数据，然后使用 setState和Array.concat方法将数据点添加到组件状态。请注意，在编写 React 代码和使用状态时，使用不可变数据结构非常重要。Array.concat方法在这里是一个不错的选择，因为它将返回一个新数组。这可确保您在浅层次上处理的是不可变的组件状态。

从这里开始，componentWillUnmount组件生命周期方法用于调用stopPolling方法，该方法使用全局clearInterval函数通过清除创建的间隔来停止轮询。

就是这样，你已经将承诺中的值添加到了 React 中的动态数据列表中！

结论

只需将setState函数与 Promise 结合使用，即可动态向数组添加值。setState 的异步特性以及React 使用虚拟 DOM的方式将确保您的组件仅在需要更新时才更新。

有关setState及其可能性的更多信息，请查看 React文档。

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

_查看原文

技术指南

阅读全文

在 React 中将 Promise 中的值添加到动态数据列表中

杭州电子商务研究院

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

class DynamicArrayComponent Extends React.Component { constructor(props) { super(props); this.interval; this.state = { dataPoints: this.props.dataPoints || [] // Set the initial state } } componentWillMount() { // Make the first request and then start polling. this.requestLatest(); this.startPolling(); } componentWillUnmount() { this.stopPolling(); } requestLatest = () => { fetch(this.props.API_URL) .then(response => response.json()) .then(dataPoint => this.setState({ dataPoints: this.state.dataPoints.concat(dataPoint) }) ); } startPolling = () => this.interval = setInterval(this.requestLatest, 5000) stopPolling = () => { if (this.interval) { clearInterval(this.interval); } } // .... }

requestLatest = () => { fetch(this.props.API_URL) .then(response => response.json()) .then(dataPoint => this.setState({ dataPoints: this.state.dataPoints.concat(dataPoint) }) ); }