React.js：数组和“违反了关于合并函数的关键假设”错误

Question

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
);

当我更改输入字段中的数字时，React 会抛出：

未捕获的错误：不变违规：已违反有关合并函数的关键假设。这是合并函数本身的错，不一定是调用者的错。

这是 React 中的错误吗？合并数组不起作用吗？

Answer 1

你的状态是一个数组。

我在 React 文档中没有看到任何内容提到 LinkedStateMixin 混合可以将输入链接到数组索引。

可能发生的事情是：

• 你的初始状态是[42, 54]
• 如果您修改索引 0 处的项目，LinkedStateMixin 会创建一个新状态 { 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-way bindings: two-levels deep path in valueLink

我只是想知道是否有可能在 React 中有 state = [42, 54] 然后 setState([undefined, 55]) 最后有 state = [42, 55]，请告诉我们:)