當我使用解構賦值來簡化我的道具時出錯

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 必須被解構