Блог

Пожалуйста, подробно объясните, почему этот код приводит к ошибке. Я прочитал статью с решением этой проблемы (счетчики const = […prevState.счетчики];). Но почему это происходит, мне непонятно.

Когда вы нажимаете на кнопку, вы видите, что счетчик увеличивается в два раза. Мы ожидаем увеличения на 1. Почему мутация prevState вызывает увеличение счетчика на 2???

 // App.js
import React, { Component } from 'react';
import Counter from './Counter';

export default class App extends Component {
  state = {
    counters: [0, 0],
  };

  clickHandler = index => {
    this.setState((prevState, prevProps) => {
      let counter = prevState.counters[index];

      const counters = prevState.counters;
      counters[index] =   counter;
      return {
        counters,
      };
    });
  };
  render() {
    const counters = this.state.counters.map((counter, index) => (
      <Counter
        counter={counter}
        key={index}
        clickHandler={() => this.clickHandler(index)}
      />
    ));
    return <React.Fragment>{counters}</React.Fragment>;
  }
}
 

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

const Counter = ({ counter, clickHandler }) => {
  return (
    <React.Fragment>
      <div>{counter}</div>
      <button onClick={clickHandler}>Increment the counter above!</button>
    </React.Fragment>
  );
};

export default Counter;
 

Правило № 1 реакции: НЕ ИЗМЕНЯЙТЕ СОСТОЯНИЕ.

     this.setState((prevState, prevProps) => {
      let counter = prevState.counters[index];

      const counters = prevState.counters;
      counters[index] =   counter; <-- THIS LINE MUTATES counters
      return {
        counters,
      };
    });
 

Должно быть:

     this.setState((prevState) => ({
        // return a new array with map, DON't mutate the old one
        counters: prevState.counters.map((c,i) => i === index ? c   : c);
    }));
 

Вы видите двойное увеличение, потому что:

1. Вы используете React.StrictMode и
2. Вы находитесь в мутирующем состоянии.

Так что суть все еще в том, ЧТОБЫ НЕ ИЗМЕНЯТЬ СОСТОЯНИЕ.

Если вы используете мой пример с React.StrictMode, вы увидите, приведет ли это к одному приращению. Это потому, что статья под названием «правильный путь» на самом деле показывает вам НЕПРАВИЛЬНЫЙ путь.

Если вы используете React.StrictMode и замечаете логические различия, это потому, что вы делаете что-то неправильно. Я уже упоминал выше, что вы делаете неправильно, вы мутируете состояние (как показано в статье).

Никогда, никогда, никогда, никогда не изменяйте состояние. Всегда возвращайте новые объекты/массивы, никогда не обновляйте существующие.