Как обновить состояние всех компонентов, принадлежащих к одному классу? - PullRequest
Новая
       7

Как обновить состояние всех компонентов, принадлежащих к одному классу?

0 голосов
/ 25 октября 2018

Этот компонент отображается в моем приложении 3 раза . 

class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userFavorites: []
    };
    this.postFavorite = this.post.bind(this);
  }

  componentDidMount() {
    this.setState(() => ({
      userFavorites: [{ id: 1, title: "A" }, { id: 2, title: "B" }]
    }));
  }

  post() {
    const obj = { id: 3, title: "C" };
    this.setState(
      prevState => ({
        userFavorites: [...prevState.userFavorites, obj]
      }),
      () => {
        console.log("AFTER", this.state.userFavorites);
      }
    );
  }

  render() {
    return (
      <div className="container">
        <div className="button" onClick={this.post} />
      </div>
    );
  }
}

Когда я вызываю post (), при нажатии на кнопку const obj добавляется в массив userFoving.сливаясь с последним состоянием.Однако он добавляется только к «Пользователю», который был нажат и вызвал метод post ().

Есть ли способ установить состояние для всех 3 «Пользовательских компонентов» в моем приложении, независимо от того,какой пользователь запускает обновление состояния?

1 Ответ

0 голосов
/ 25 октября 2018

Три компонента пользователя не знают друг друга.Общее состояние должно быть перемещено выше в дереве компонентов.

Ниже приведен небольшой пример, демонстрирующий эту идею.Состояние сохраняется в <Parent> и передается каждому <Child> как реквизит вместе с обратным вызовом для добавления в состояние. 

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [] };
    this.addItem = this.addItem.bind(this);    
  }

  render() {
    return (
      <div>
        <Child name="first" items={this.state.items} add={this.addItem} />
        <Child name="second" items={this.state.items} add={this.addItem} />
        <Child name="third" items={this.state.items} add={this.addItem} />
      </div>
    );
  }
  
  addItem(item) {
    this.setState({ items: [...this.state.items, item] });
  }
}

function Child(props) {
  return (
    <div>
      <h3>{props.name}</h3>
      {props.items.map((item, i) => (<div key={i}>{item}</div>))}
      <button onClick={() => props.add(props.name)}>add</button>
    </div>
  );
}

ReactDOM.render(<Parent />, 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>
...