列表未对动态孩子排序

IT技术 reactjs
2021-05-11 17:57:22

我的问题是react不尊重我由后端给出的命令。

它给了我一个警告。

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

我查看了文档，但不知道错误在哪里。

充满活力的孩子

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

我有一个带有此代码的 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>
2个回答

什么类型的数据结构

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

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

考虑这个演示错误的JSFiddle 示例：

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

但是，此示例使用非数字键，并且不会给出相同的警告：

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

这个也没有，它使用一个数组：

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

考虑将您的数据转换为数组。

尝试转换为字符串：

  <FilmsListItem key={film.ID().toString()} data={film}/>
其它你可能感兴趣的问题
上一篇画布未在 reactjs 中呈现 下一篇ReactJs：如何获取引用来自其父级的组件的引用