我使用解构赋值简化道具时出错

Question

我正在研究此组件中所有道具的结构。当我使用变量分配存储所有道具时，代码可以工作，但是当我将道具存储在函数参数中时，会出现错误消息，为什么会发生？错误消息中我的组件位于下方。

import React from 'react';
import Counter from './Counter.js';

const Player = ( { id, name, score, changeScore, index } ) => {
/*const { id, name, score, changeScore, index } = props*/
  return (
    <div className="player">
      <span className="player-name">
        <button className="remove-player" onClick={() => props.removePlayer(id)}>✖</button>
        { name }
      </span>

      <Counter
      score={score}
      changeScore={changeScore}
      index={index}
      />
    </div>
  );
}

export default Player;

Answer 1

<button className="remove-player" onClick={() => props.removePlayer(id)}>✖</button>

props未定义，因为没有这样做：

const Player = ( props ) => {

您正在做：

const Player = ( { id, name, score, changeScore, index } ) => {

可能的解决方案

1。在参数解构的末尾添加...props：

const Player = ( { id, name, score, changeScore, index, ...props } ) => {

然后您可以使用props.removePlayer()：

<button className="remove-player" onClick={() => props.removePlayer(id)}>✖</button>

2。正如Emile所建议的，将removePlayer添加到参数解构中：

const Player = ( { id, name, score, changeScore, index, removePlayer} ) => {

然后您使用removePlayer()而不是props.removePlayer()：

<button className="remove-player" onClick={() => removePlayer(id)}>✖</button>

Answer 2

const Player = ( { id, name, score, changeScore, index, removePlayer } ) => {
/*const { id, name, score, changeScore, index } = props*/
  return (
    <div className="player">
      <span className="player-name">
        <button className="remove-player" onClick={() => removePlayer(id)}>✖</button>
        { name }
      </span>

      <Counter
      score={score}
      changeScore={changeScore}
      index={index}
      />
    </div>
  );
}

尝试这个，我希望它能起作用removePlayer必须被解构