Reactjs 列表未对动态子项进行良好排序

我的问题是react不尊重后端发出的命令

这给了我一个警告

子对象应具有非数字键，以便保留顺序

我检查了文档，不知道错误在哪里

我正在将密钥传递到组件，但它不起作用

我有一个带有此代码的电影组件

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

{this.props.films&&this.props.films.map（（film，i）=>
).toJS（）}

然后我有了这个电影列表项

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

帕拉布拉斯

尝试转换为字符串：

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

---

数据结构的类型是什么

this.props.films&&this.props.films.map（（film，i）=>
).toJS（）

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

考虑到这表明了错误：

var Test=React.createClass({
render（）{
var children={1:test1，2:test2}；
返回{children}；
}
});

但是，使用非数字键，不会给出相同的警告：

var Test=React.createClass({
render（）{
var children={a:test1，b:test2}；
返回{children}；
}
});

如果使用数组，也不会：

var Test=React.createClass({
render（）{
var children=[test1，test2]；
返回{children}；
}
});

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

var-test={1:true}；
console.log（测试[“1”]）；//真的

React无法保证子对象值的顺序：

[“1”、“2”、“9”、“10”、“11”、“19”、“20”、“21”、“30”]排序（）
// ["1", "10", "11", "19", "2", "20", "21", "30", "9"]

---

考虑将数据转换为数组。

是数值键吗？我将其转换为字符串，但不起作用

key={key'+film.ID（）}

？我以前尝试过film.nombre（），但没有成功。我做了你建议的事情，得到了相同的结果