我为每个孩子提供了一个关键的反应，但我仍然收到错误？

Question

之前我已经完成了这项工作并提供了一个密钥，但出于某种原因，我仍然遇到错误。我有点新的反应，所以在某个地方可能是一个愚蠢的错误。

编辑：错误是数组中的每个子项应具有唯一键

以下是代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';

class BooksList extends Component {
  renderList() {
    return _.map(this.props.books, book => {
      return (
        <div key={book.id}>
          <h2>{book.title}</h2>
          <h3>{book.description}</h3>
          <h4>{book.price}</h4>
        </div>
      );
    });
  }
  render() {
    return (
      <div>
        {this.renderList()}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    books: state.books
  }
}

export default connect(mapStateToProps)(BooksList);

编辑：

我尝试在构造函数中绑定this.renderList，但仍然遇到同样的问题：

constructor(props) {
    super(props);
    this.renderList = this.renderList.bind(this);
}

Answer 1

您的问题是您最初在地图发生之前没有加载图书..所以您最初的数据无效。

最初renderList() { const elems = []; _.forEach(this.props.books, book => { if (_.isEmpty(book)) return; elems.push( <div key={book.id}> <h2>{book.title}</h2> <h3>{book.description}</h3> <h4>{book.price}</h4> </div> ); }); return elems; } 就是这个

然后你装书，然后转向这个。

解决此问题的方法是仅在拥有有效对象时进行渲染。使用lodash isEmpty检查对象...使用forEach，这样你就不会在数组中返回空（在数组中保留较少的项）。然后在最后返回该数组：）

{{1}}