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

IT技术 javascript reactjs
2021-05-13 00:16:37

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 中的错误吗?合并数组不起作用吗?

1个回答

你的状态是一个数组。

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

发生的事情大概是:

  • 你的初始状态是 [42, 54]
  • 如果在索引 0 处修改 item,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 路绑定:valueLink 中的两级深度路径

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