Почему не перерисовывается компонент App при изменении его состояния?

Question

[Святослав Хусамов]

Почему не добавляются апельсинки, если нажать кнопку `Добавить 1`?

https://codesandbox.io/s/yqwkvy1n4z

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Title extends React.Component {
  render() {
    return "React App";
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.addFruit = this.addFruit.bind(this);
    this.state = {
      fruitList: ["Киви", "Банан", "Яблоки"]
    };
  }
  addFruit() {
    this.setState(prevState => {
      prevState.fruitList.push("Мандаринка");
      return {
        fruitList: prevState.fruitList
      };
    });
  }
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={this.add}>Добавить 1</button>
        <FruitList
          name={`Список апельсинок (${this.state.fruitList.length})`}
          list={this.state.fruitList}
        />
      </div>
    );
  }
}

class FruitList extends React.Component {
  constructor(props) {
    super(props);
    this.add = this.add.bind(this);
    this.state = {
      list: props.list
    };
  }
  add() {
    this.setState(prevState => {
      prevState.list.push("Апельсинка");
      return {
        list: prevState.list
      };
    });
  }
  render() {
    return (
      <div className="fruit-list">
        <h1>{this.props.name}</h1>
        <button onClick={this.add}>Добавить 2</button>
        <ul>
          {this.state.list.map((fruit, index) => (
            <FruitListItem key={index} text={fruit} />
          ))}
        </ul>
      </div>
    );
  }
}

class FruitListItem extends React.Component {
  render() {
    return <li className="fruit-list-item">{this.props.text}</li>;
  }
}

const rootElement = document.getElementById("root");
const titleElement = document.getElementsByTagName("title")[0];
console.log("titleElement", titleElement);
ReactDOM.render(<App />, rootElement);
ReactDOM.render(<Title />, titleElement);

Comments

[Роман Александрович]

так?
https://codesandbox.io/s/n4751rx27j

[Антон Спирин]

Роман Александрович, Вы мутируете старый объект состояния и передаете в новое. Нельзя так делать. Это противоречит идеологии react.

[Роман Александрович]

Антон Спирин, уважаемый вы уже раз 5 мне это пишите только не я писал этот код
я просто его форкнул и поправил что б он работал

[Антон Спирин]

Роман Александрович, так зачем беретесь исправлять если оставляете ключевые ошибки?

[Роман Александрович]

Антон Спирин, было желание вот и взялся

[Святослав Хусамов]

Роман Александрович, спасибо, оказывается я протупил. Вместо addFruit написал add.

Answer 1

[Святослав Хусамов]

Всем спасибо, оказывается я протупил. Вместо addFruit написал add.

Comments

[Антон Спирин]

Вам об этом несколько человек и написало.
Вот только это самая незначительная из ошибок вашего кода. Главные это мутирование state и нарушение принципа DRY

[Святослав Хусамов]

Антон Спирин, все как-то намеками это писали. Я не сразу въехал.

Теперь осталось понять, как сделать чтобы компонент FruitList был независимым от App. Ваш код onClick из FruitList связал с методом из App. А это мне годится, потому что в другом месте я хочу использовать FruitList со своим обработчиком кнопки добавления. Но это я уже сам попробую исправить.

[Святослав Хусамов]

Антон Спирин, по поводу не менять пред. состояния я понял. А DRY это что такое?

[Антон Спирин]

Святослав, Don't Repeat Yourself

Answer 2

[Антон Спирин]

Во первых вы мутируете состояния обоих компоненов:

this.setState(prevState => {
  prevState.fruitList.push("Мандаринка");
  return {
    fruitList: prevState.fruitList
  };
});

Что противоречит идеологии react.
Во-вторых пишите props в state в FruitsList только в конструкторе.
Ну и передаете несуществующий обработчик в onClick.

Исправленный вариант.
Изучайте, делайте выводы.

Comments

[Святослав Хусамов]

Я думал что достаточно будет в конструкторе это делать, чтобы состояние было ДО монтирования

class FruitList extends React.Component {
  constructor(props) {
    super(props);
    this.add = this.add.bind(this);
    this.state = {
      list: props.list
    };
  }

[Антон Спирин]

Святослав, вы понимаете, что такое иммутабельность?

[Святослав Хусамов]

Антон Спирин, соглашение, при котором созданный объект не должен меняться. Так?

[Антон Спирин]

Святослав, добавил исправленный вариант в ответ. Там несколько изменений. Разбирайте.

[Святослав Хусамов]

Антон Спирин, спасибо! Но где вы ответ оставили?

[Антон Спирин]

Святослав, вот же.

[Святослав Хусамов]

Антон Спирин, спасибо, оказывается я протупил. Вместо addFruit написал add.

[Святослав Хусамов]

Антон Спирин, за не изменяемость предыдущего состояния тоже спасибо!
и за конструкцию [...prevState.fruitList, "Мандаринка"]
не сразу бы догадался что с ... будет весьма красиво выглядеть

Answer 3

[Mikhail Osher]

Почему люди никогда не читают документацию????

https://reactjs.org/docs/state-and-lifecycle.html#...

Do Not Modify State Directly

// EDIT

А prevState.fruitList.push("Мандаринка") по-вашему что? Это мутация в чистом её виде.

Comments

[Святослав Хусамов]

О чем вы??? Я в коде выше использую ТОЛЬКО this.setState(...

[Святослав Хусамов]

И конкретно код, который запускается при нажатии на кнопку Добавить1

addFruit() {
    this.setState(prevState => {
      prevState.fruitList.push("Мандаринка");
      return {
        fruitList: prevState.fruitList
      };
    });
  }

[Святослав Хусамов]

И где тут Modify State Directly?

[Mikhail Osher]

take.ms/fNFRJ

[Святослав Хусамов]

> prevState.fruitList.push("Мандаринка")

А мне тут что-ли клон массива prevState.fruitList делать?

[Святослав Хусамов]

Спасибо за наводку на документацию.