Question

我的问题是反应不符合我后端给出的命令。

它给了我一个警告。

子对象应该具有非数字键，因此保留了排序

我检查了文档，但我不知道错误的位置。

我将密钥传递给组件但它没有工作......

我有一个包含此代码的Films组件

{this.props.films && this.props.films.map((film, i) =>
              <FilmsListItem key={film.ID()} data={film}/>
).toJS()}

然后我有了这个

的FilmListItem

<div>
          <div className="show-image">
              <img onClick={this.modifyFilm.bind(this, this.props.data)}
                   src={this.props.data.foto()}
                   title={this.props.data.nombre()}
                   alt={this.props.data.nombre()}
                   width="230"
                   height="345"/>
              <input type="button"
                     className="delete"
                     value="BORRAR"
                     onClick={this.remove.bind(this, this.props.data)}>
              </input>
              <div className="diccionarios">
                <button onClick={this.diccionarios.bind(this, this.props.data)}>PALABRAS</button>
              </div>
            </div>
      </div>

Answer 1

什么类型的数据结构

this.props.films && this.props.films.map((film, i) =>
  <FilmsListItem key={film.ID()} data={film}/>
).toJS()

返回？我的猜测是它返回一个对象，并且React被迫使用对象的键（可能是数字键）作为子键。

考虑显示错误的this JSFiddle example：

var Test = React.createClass({
  render() {
    var children = { 1: <div>test1</div>, 2: <div>test2</div> };
    return <div>{children}</div>;
  }
});

但是，this example使用非数字键，并且不会发出相同的警告：

var Test = React.createClass({
  render() {
    var children = { a: <div>test1</div>, b: <div>test2</div> };
    return <div>{children}</div>;
  }
});

this one也不使用数组：

var Test = React.createClass({
  render() {
    var children = [<div key={1}>test1</div>, <div key={2}>test2</div>];
    return <div>{children}</div>;
  }
});

由于对象的键始终是字符串：

var test = { 1: true };
console.log(test["1"]); // true

React不能保证子对象值的排序：

["1", "2", "9", "10", "11", "19", "20", "21", "30"].sort()
// ["1", "10", "11", "19", "2", "20", "21", "30", "9"]

考虑将数据转换为数组。

Answer 2

尝试转换为字符串：

  <FilmsListItem key={film.ID().toString()} data={film}/>

列表没有订购好动态的孩子

2 个答案: