Использование методов и повторная отрисовка компонентов React в массиве

Question

У меня есть родительский компонент React, состояние которого содержит некоторое количество экземпляров класса React.Component. Я делаю это так, потому что в этих дочерних классах есть несколько методов, которые мне нужно вызывать и вызывать в разных случаях. Вот упрощенный пример, показывающий это

interface ChildState {
    foo: number
}

interface ParentState {
    children: Child[]
}

class Child extends React.Component<{}, ChildState> {
    public constructor(props: {}) {
        super(props);
        this.state = {
            foo: 1
        }
    }

    public increase(): void {
        this.setState({
            foo: this.state.foo + 1
        })
    }

    public render(): JSX.Element {
        return <div>{this.state.foo}<br/></div>
    }
}

class Parent extends React.Component<{}, ParentState> {
    public constructor(props: {}) {
        super(props);
        this.state = {
            children: [
                new Child({}),
                new Child({}),
                new Child({})
            ]
        }
    }

    public render(): JSX.Element {
        return <div>
            <button
                onClick={() => {
                    for (const child of this.state.children) {
                        child.increase();
                    }
                }}
            >
                Increment
            </button>
            {this.state.children.map((child, index) => <div key={index}>{child.render()}</div>)}
        </div>
    }
}

. Я могу подтвердить, что Child.increase вызывается с console.log, но фактическая переменная состояния foo всех дочерних элементов не изменяется. . Почему состояние этих детей не затрагивается?

Кроме того, нужно ли мне беспокоиться о повторном вызове render(), когда эти состояния можно будет правильно обновить?

Answer 1

Не уверен, помогает ли это, но вы передаете реквизиты от родителя к потомку, родитель также может передавать поведение в качестве реквизита (функция, которая вызывается при нажатии кнопки, называется возрастанием).

Когда дети делятся вашим состоянием может состояние подъема использовать контекст или сокращение.

class Child extends React.Component {
  render() {
    return (
      <button
        onClick={() => this.props.increase(this.props.id)}
      >
        {this.props.count}
      </button>
    );
  }
}

class App extends React.Component {
  state = {
    counters: [0, 0, 0],
  };
  increase = (
    index //arrow function (correct this binding)
  ) =>
    this.setState({
      counters: this.state.counters.map((count, i) =>
        i === index ? count + 1 : count
      ),
    });
  render() {
    return (
      <div>
        {this.state.counters.map((num, index) => (
          <Child
            count={num}
            key={index}
            id={index}
            increase={this.increase}
          />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

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


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