Реагируйте JS, как обновить значение в массиве

Question

Я довольно новичок в React JS, и сейчас я работаю над проектом для школы. Это система подсчета очков для команд, всего 4 команды. В каждой команде 5 детей. Теперь я создал массив, чтобы иметь 5 отсчетов с идентификатором. 5 счетчиков (количество) предназначены для детей. Я использую React в Laravel. Мой код:

export default class Gryffindor extends Component {
    constructor(props) {
        super(props);
        this.state = { counters: [] };
        this.fetchCounters = this.fetchCounters.bind(this);
        this.counterIncrement = this.counterIncrement.bind(this);
        this.counterDecrement = this.counterDecrement.bind(this);
    }

    componentDidMount() {
        this.fetchCounters();
    }

    fetchCounters() {
        const counters = [
            { id: 1, amount: 0 },
            { id: 2, amount: 0 },
            { id: 3, amount: 0 },
            { id: 4, amount: 0 },
            { id: 5, amount: 0 }
        ];
        this.setState({ counters });
    }

    counterIncrement(e) {}

    counterDecrement() {
        if (counters.amount > 0) {
            this.setState({ counters: amount - 5 });
        }
    }

    render() {
        return <CounterBody counters={this.state.counters} />;
    }
}

const CounterBody = ({ counters }) => (
    <table>
        <thead>
            <tr>
                <th />
                <th />
                <th />
            </tr>
        </thead>
        <tbody>
            {counters.map(counter => (
                <tr key={counter.id}>
                    <td>
                        <button onClick={this.counterDecrement}>Delete</button>
                    </td>
                    <td>{counter.amount}</td>
                    <td>
                        <button onClick={this.counterIncrement}>Add</button>
                    </td>
                </tr>
            ))}
        </tbody>
    </table>
);

if (document.getElementById("Gryffindor")) {
    ReactDOM.render(<Gryffindor />, document.getElementById("Gryffindor"));
}

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

Answer 1

Вы должны структурировать свой код следующим образом ... Это прояснит, что вы просите

class Gryffindor extends React.Component {
    constructor() {
      state = {
        counters: [
          { id: 1, amount: 0 },
          { id: 2, amount: 0 },
          { id: 3, amount: 0 },
          { id: 4, amount: 0 },
          { id: 5, amount: 0 }
        ]
      };

      this.counterIncrement = this.counterIncrement.bind(this);
      this.counterDecrement = this.counterDecrement.bind(this);
    }

  counterIncrement(index) {
    this.setState(prevState => {
      const counters = [...prevState.counters];
      counters[index] = {
        ...counters[index],
        amount: counters[index].amount + 1
      };
      return { counters };
    });
  };

  counterDecrement(index) {
    this.setState(prevState => {
      const counters = [...prevState.counters];
      counters[index] = {
        ...counters[index],
        amount: counters[index].amount - 1
      };
      return { counters };
    });
  };

  render() {
    return (
      <CounterBody
        counters={this.state.counters}
        onDecrement={this.counterDecrement}
        onIncrement={this.counterIncrement}
      />
    );
  }
}

Ваш вопрос довольно неясен, но чтобы найти его по идентификатору, у вас было бы что-то вроде

deleteCertainCounter(e, passedInID) {
    this.setState({ counters: counters.filter(counter => counter.id !== passedInID) ]);
}

Answer 2

Невозможно достичь this.counterDecrement или this.counterIncrement в компоненте Gryffindor из дочернего компонента. Вместо этого вам нужно передать эти функции как реквизиты.

Вы можете передать индекс счетчика в функции увеличения / уменьшения и обновить значение счетчика amount этим индексом.

Вы также можете поместить счетчики непосредственно в ваше состояние вместо обновления в componentDidMount.

Пример

class Gryffindor extends React.Component {
  state = {
    counters: [
      { id: 1, amount: 0 },
      { id: 2, amount: 0 },
      { id: 3, amount: 0 },
      { id: 4, amount: 0 },
      { id: 5, amount: 0 }
    ]
  };

  counterIncrement = index => {
    this.setState(prevState => {
      const counters = [...prevState.counters];
      counters[index] = {
        ...counters[index],
        amount: counters[index].amount + 1
      };
      return { counters };
    });
  };

  counterDecrement = index => {
    this.setState(prevState => {
      const counters = [...prevState.counters];
      counters[index] = {
        ...counters[index],
        amount: counters[index].amount - 1
      };
      return { counters };
    });
  };

  render() {
    return (
      <CounterBody
        counters={this.state.counters}
        onDecrement={this.counterDecrement}
        onIncrement={this.counterIncrement}
      />
    );
  }
}

const CounterBody = ({ counters, onDecrement, onIncrement }) => (
  <table>
    <thead>
      <tr>
        <th />
        <th />
        <th />
      </tr>
    </thead>
    <tbody>
      {counters.map((counter, index) => (
        <tr key={counter.id}>
          <td>
            <button onClick={() => onDecrement(index)}>Delete</button>
          </td>
          <td>{counter.amount}</td>
          <td>
            <button onClick={() => onIncrement(index)}>Add</button>
          </td>
        </tr>
      ))}
    </tbody>
  </table>
);

ReactDOM.render(<Gryffindor />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>