Question

我创建了一个包含两个列表的简单应用程序（在react js中），您可以向该列表添加元素。一个是输入元素列表，另一个是跨度列表。

添加新元素后，span列表完美呈现，但输入列表呈现的方式不同。

这就是我的反应类的样子

var App = React.createClass({
  getInitialState: function(){
    return {
      'app': {
        'data': this.props.data,
        'data2': this.props.data2
      }
    };
  },
  onclick: function(){
    var dat = this.state.app.data;
    var val = this.refs.input.getDOMNode().value;

    dat.splice(0, 0, val);

    var dat2 = this.state.app.data2;
    dat2.splice(0, 0, val);

    this.setState({'app': {
      'data': dat,
      'data2': dat2
    }});

  },
  renderElement: function(i){
    return(
      <input defaultValue={i} />
    );
  },
  renderElement2: function(i){
    return(
      <span>{i}</span>
    );
  },
  render: function(){
    var self = this;
    return(
      <div>
        <input type="text" ref="input" placeholder="Enter a value"/>
        <input type="button" value="Add value" onClick={this.onclick} />
        <div className="col2">
          {this.state.app.data.map(function(page, i){
              return(
                <div key={i}>{self.renderElement(page)}</div>
              );
          })}
        </div>
        <div className="col2">
          {this.state.app.data2.map(function(page, i){
              return(
                <div key={i}>{self.renderElement2(page)}</div>
              );
          })}
        </div>
      </div>
    );
  }
});

这就是应用程序的呈现方式

var data =  [1,2,3];
var data2 =  [1,2,3];

React.render(<App data={data} data2={data2}/>, document.getElementById("main"));

以下是DEMO

My test case:
I add 55 and expect the results to look like this 
55
1
2
3
55
1
2
3

But I get
1
2
3
3
55
1
2
3

我错过了一些基本的东西吗？

Answer 1

首先渲染（大致）看起来像这样：

<div>
 <div key={0}><input defaultValue="1" /></div>
 <div key={1}><input defaultValue="2" /></div>
 <div key={2}><input defaultValue="3" /></div>
</div>
<div>
 <div key={0}><span>1</span></div>
 <div key={1}><span>2</span></div>
 <div key={2}><span>3</span></div>
</div>

很酷，没问题。然后让我们说我把foo＆＃39; foo＆＃39;在框中单击“添加值”。状态通过在第一个项目之前插入（侧边注释：拼接（0,0，x）是非移位（x））更新，然后渲染：

<div>
 <div key={0}><input defaultValue="foo" /></div>
 <div key={1}><input defaultValue="1" /></div>
 <div key={2}><input defaultValue="2" /></div>
 <div key={3}><input defaultValue="3" /></div>
</div>
<div>
 <div key={0}><span>foo</span></div>
 <div key={1}><span>1</span></div>
 <div key={2}><span>2</span></div>
 <div key={3}><span>3</span></div>
</div>

现在是React采取这两个问题的时候了，并找出改变了什么。为此，它会比较组件（此处为div，span或input）和键。

从span部分开始，它会看到所有标签都相同，但是在结束之前还没有看到它的新密钥。它还发现div[0] span，div[1] span和div[2] span的价值都已发生变化。它会在末尾插入带有文本3的 new 元素，并更新其他跨度。效率不高，但确实有效。

现在输入......它的作用大致相同。前三个输入的键和标签是相同的，它告诉每个输入他们正在更新，他们检查他们是否有价值道具，如果没有，请拒绝做任何事情。

它看到最后有新输入。它位于div[3] input，默认值为＆＃34; 3＆＃34;。 React插入新输入，将值设置为3，更新完成。

当您继续时，上述过程是相同的，并且它会继续更新跨度，并且每次都插入新的div span和div input。

这里的主要问题，除了我认为不应该使用的defaultValue之外，关键是颠倒！项目在开头插入，因此键应该下降，而不是上升。这可以通过使用项目的长度并从中减去索引来解决。如果长度为4，则键将为4,3,2,1。

this.state.app.data.map(function(page, i, items){
  return(
    <div key={items.length - i}>{self.renderElement(page)}</div>
  );
})

React然后说'哦，开头的新项目，我应该在那里插入一个节点，并且每个人都很高兴。结束。

Answer 2

抱歉，我不知道发生这种情况的确切原因，但如果您在输入中包含键属性的值，则可以解决问题：

  renderElement: function(i){
    return(
      <input key={i} defaultValue={i} />
    );
  },

我的猜测是缺少关键＆＃39;并且使用＆＃39; defaultValue＆＃39;而不是＆＃39;值＆＃39;，使得React难以正确地区分变化。

React js：与其他元素相比，输入元素呈现方式不同

2 个答案: