Question

我有一个使用map方法访问对象数组的类组件。然后，我使用隐式返回将每个对象变成一个组件。据我了解，map方法只能接受一个数组，然后传递一个函数来更改数组。我不明白为什么下面的代码有效？

class App extends Component {
  state = {
    players: [
      {
        name: "Guil",
        id: 1
      },
      {
        name: "Treasure",
        id: 2
      },
      {
        name: "Ashley",
        id: 3
      },
      {
        name: "James",
        id: 4
      }
    ]
  };
  
    render() {
    return (
      <div className="scoreboard">
        {this.state.players.map( player =>
          <Player
            name={player.name}
            id={player.id}
            key={player.id.toString()}
            removePlayer={this.handleRemovePlayer}
          />
        )}
      </div>
    );
  }
}

Answer 1

来自MDN

map（）方法创建一个新数组，其中填充了在调用数组中每个元素上调用提供的函数的结果。

map（）永远不会更改原始数组，而只是根据提供的函数创建一个新数组。

在您的代码中，map（）方法创建一个新的Player组件数组（提供的回调结果）。

Answer 2

您使用的方式与您所说的相同：“获取一个数组，然后传递一个函数来更改该数组”。这是箭头函数和一个隐式的返回动作。

无法理解map（）方法

2 个答案: