使用ES6进行映射 - 没有任何反应

Question

我正在尝试通过数组进行映射，但没有任何反应。

没有错误。

这是我的代码。

constructor(props) {
    super(props)

    this.addProductToBasket = this.addProductToBasket.bind(this);
    this.removeProductFromBasket = this.removeProductFromBasket.bind(this);
    this.printArray = this.printArray.bind(this);

    this.state = {

      items: [{
        name: 'Cola',
        price: 1.20
      }, {
        name: 'Bread',
        price: 0.50
      }, {
        name: 'Beer',
        price: 0
      }
    ]

    };
  }

     printArray = () => {
    this.state.items.map((item, key) => {
      return <li key={item.name}>Name: {item.name}, Price {item.price}</li>
    });
  }

    render() {
    return (
      <div className="App">
        <ul>
          {this.printArray()}
        </ul>
      </div>
    );
  }

箭头函数不应该返回列表元素吗？

Answer 1

printArray不会返回任何内容。内部箭头函数确实返回了一些东西，但没有返回外部箭头函数。

printArray = () => {
  return this.state.items.map((item, key) => {
    return <li key={item.name}>Name: {item.name}, Price {item.price}</li>
  });
};

// or

printArray = () => this.state.items.map((item, key) => {
    return <li key={item.name}>Name: {item.name}, Price {item.price}</li>
});