反应：将数组对象存储在状态中并使用键显示

Question

I'm learning react and I want to know the correct way to store object arrays in state and then access them later, or if it is correct and if I should do this at all.

In react I perform and AJAX request and I get a list of objects. These I want to store in state so that I can push it to another react class as a props. I want to be able to access the items in the objects.

UPDATE - fixed and working

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

Your code is most likely working, but I suspect that your understanding of componentDidMount is incorrect. componentDidMount is called only once, after the component is initially rendered. It is not called when props are updated.

You may want to look into componentDidUpdate .

In general, I would avoid using custom objects for state - especially shared mutable objects - and use plain objects instead.

Answer 2

I wouldn't setState with each element in array because it will do one terrible thing - rerender component each time. Which will result in terrible performance later id it will become big app.

I would suggest to setState already prepared data so it wouldnt needlesly rerender [i] Times. So setState only once in Ajax requests if you can