получаю ошибку, когда я использую назначение деструктуризации, чтобы упростить мои реквизиты - PullRequest
Новая
       19

получаю ошибку, когда я использую назначение деструктуризации, чтобы упростить мои реквизиты

1 голос
/ 10 января 2020

Я работаю над деструктурой всех реквизитов в этом компоненте. Когда я сохраняю все свои реквизиты с помощью назначения переменных, код работает, но когда я сохраняю свои реквизиты в параметрах функции, я получаю сообщение об ошибке. Почему это происходит? Мой компонент вместе с сообщением об ошибке внизу. 

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;

error message from browser

Ответы [ 2 ]

2 голосов
/ 10 января 2020 
<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. Как предлагает Эмиль, добавьте removePlayer к параметру деструктуризации: 

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

Затем вы используете removePlayer() вместо props.removePlayer(): 

<button className="remove-player" onClick={() => removePlayer(id)}>✖</button>
1 голос
/ 10 января 2020 
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 должен быть деструктурирован

...