Question

我正在学习反应，我想知道在状态中存储对象数组的正确方法，然后在以后访问它们，或者如果它是正确的，如果我应该这样做。

在反应中我执行和AJAX请求，我得到一个对象列表。这些我想存储在状态中，以便我可以将它作为道具推送到另一个反应类。我希望能够访问对象中的项目。

更新 - 修复并正常工作

var Providers = React.createClass({

    getInitialState: function() {
        return {providers: []};
    },

    componentDidMount: function () {
        var uri = this.props.source;

        $.ajax({
            type: "GET",
            dataType: 'json',
            url: uri,
            crossDomain: true,
        })
        .done(function (data) {
            var newProviders = []
            $.each(data, function (i, p) {
                newProviders.push(data[i]);
            });
            console.log(newProviders);
            this.setState({ providers: newProviders });

        }.bind(this))
        .fail(function (xhr, textStatus, errorThrown) {
            console.log(xhr.responseText);
            console.log(textStatus);
        });
    },

    render: function () {
        return (
            <div>
                <Provider providers={this.state.providers}></Provider>
            </div>
        );
    }
});

var Provider = React.createClass({
    componentDidUpdate: function () {
        console.log(this.props.providers[0]);
    },

    render: function () {
        return (
            <p></p>
        );
    }
});

Answer 1

您的代码最有可能正常运行，但我怀疑您对componentDidMount的理解不正确。在最初呈现组件之后，componentDidMount仅被调用一次。道具更新时不会调用它。

您可能需要查看componentDidUpdate。

一般情况下，我会避免使用自定义对象作为状态 - 尤其是共享的可变对象 - 而是使用普通对象。

Answer 2

我不会在数组中使用每个元素的setState，因为它会做一件可怕的事情 - 每次重新渲染组件。这将导致后来的糟糕表现，它将成为大应用程序。

我建议设置已经准备好的国家数据，这样它就不会重新发布[i] Times。所以如果你能

，那么在Ajax请求中只能调用一次

React：将数组对象存储在状态中并使用键

2 个答案: