Geek asks and answers

React.js: arrays and "Critical assumptions about merge functions were broken" error

http://jsfiddle.net/NV/f54Xr/

/**
 * @jsx React.DOM
 */

var Dummy = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return [42, 54];
    },
    render: function() {
        return <div>
            {this.state.map(this.renderItem)}
            <pre>{JSON.stringify(this.state, null, 2)}</pre>
        </div>
    },
    renderItem: function(item, i) {
        return <div>
            <input type="number" valueLink={this.linkState(i)}/>
        </div>
    }
});


React.renderComponent(
    <Dummy/>,
    document.body
);

When Im changes the numbers in the input fields of React throws:

Missed Error: Invariant Violation. Critical assumptions about merge functions have been violated. This is a mistake of the merge functions themselves, not necessarily calling.

Is this a bug in React? Does array merging work?

+3
source share
1 answer

Your state is an array.

I have not seen anything in a React document in which a mention of a LinkedStateMixin connection can associate an input with an array index.

The following is likely to happen:

  • Your initial condition [42, 54]
  • If you change the item at index 0, LinkedStateMixin creates a new state {0: 43}

setState() , ( ), React JSON JS. :)

, array[index] object[key] .

, React , , , .

:

http://jsfiddle.net/f54Xr/3/

var Dummy = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {0: 42, 1: 54};
    },
    render: function() {
        return <div>
            {Object.keys(this.state).map(this.renderItem)}
            <pre>{JSON.stringify(this.state, null, 2)}</pre>
        </div>
    },
    renderItem: function(key) {
        return <div>
            <input type="number" valueLink={this.linkState(key)}/>
        </div>
    }
});

, LinkedStateMixin , :

React.js 2- : valueLink

, React = [42, 54], setState([undefined, 55]), , , = [42, 55], :)

+3

More articles:


All Articles