React.js：数组和“违反合并函数的关键假设”错误 [英] React.js: arrays and "Critical assumptions about the merge functions have been violated" 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 =numbervalueLink = {this.linkState（i）} /> 
< / div> 
} 
}）; 
 
 
 React.renderComponent（
< Dummy />，
 document.body 
）; 
  

当我在输入字段中更改数字时React抛出：

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

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

解决方案

你的状态是一个数组。

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

可能会发生什么：

• 您的初始状态是 [42,54]


• 如果修改索引0处的项目，则LinkedStateMixin将创建新状态{0：43}

As 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 =numbervalueLink = {this.linkState（key）} /> 
< / div> 
} 
}）; 
  

---

顺便说一句，你可以尝试创建自己的LinkedStateMixin链接到数组索引，你在那里做过：

React.js双向绑定：valueLink中的两级深度路径

我只是想知道React中是否有可能有state = [42,54] 然后 setState（[undefined，55]） 最终获得州= [42,55] ，请告诉我们：）

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 I’m changing numbers in the input fields React throws:

Uncaught Error: Invariant Violation: Critical assumptions about the merge functions have been violated. This is the fault of the merge functions themselves, not necessarily the callers.

Is it a bug in React? Is merging arrays not working?

解决方案

Your state is an array.

I didn't see anything in the React doc mentioning the LinkedStateMixin mixin could link an input to an array index.

What happens is probably:

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

As setState() doesn't override an existing state but merges the new state into the existing state (because you only update one input at a time), then React is trying to merge a JSON object into a JS array. Which is weird :)

Actually your initial values are displayed correctly because both array[index] and object[key] works the same.

I don't think React support arrays well for now but it's worth opening a pull request maybe.

For now you can try to use objects like this:

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

---

By the way you may try to create your own LinkedStateMixin to link to an array index, has you have done there:

React.js 2-way bindings: two-levels deep path in valueLink

I just wonder if it is possible in React to have state = [42, 54] and then setState([undefined, 55]) to finally have state = [42, 55], please tell us :)

这篇关于React.js：数组和“违反合并函数的关键假设”错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！