Как изменить состояние родительского компонента с дочернего?

Question

Что я пытаюсь сделать

В моем первом компоненте я получаю элементы со статусом 2 и устанавливаю их флажки.

В моем втором компоненте , Я меняю статус элементов на 3.

В третьем компоненте после изменения статуса во втором компоненте открывается модальный режим.

Когда модальный закрывается, навигация возвращается к первому компоненту.

Проблема в том, что элементы, статус которых я изменил, все еще находятся в первом компоненте.

Их статус равен 3, поэтому их не должно быть в первом компоненте.

В этом случае, как вы это решите?

похоже, componentDidUpdate здесь не работает.

Буду признателен, если вы дадите мне совет.

Текущий код

первый компонент

export default class fist extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      checkedItems: [],
    };
  }

  onUpdate = (item) => {
    this.setState((previous) => {
      const { checkedItems } = previous;
      const index = checkedItems.indexOf(item);
      if (index === -1) {
        checkedItems.push(item);
      } else {
        checkedItems.splice(index, 1);
      }
      return { checkedItems };
    });
  };

  async componentDidMount() {
    const items = db.itemsCollection
      .where('status', '==', 2)
      .get();
    this.setState({ items });
  }

  render() {
    const { items, checkedItems } = this.state;
    return (
      <Container>
        <View style={styles.list_asset}>
          {items.map((item) => (
            <View style={styles.article_asset} key={item.id}>
              <Text style={styles.phrase}>{item.name}</Text>
              <View style={styles.area_price}>
                <CheckBox
                  style={styles.check}
                  checked={!!checkedItems.find((obj) => obj == item)}
                  onPress={() => this.onUpdate(item)}
                />
              </View>
            </View>
          ))}
        </View>
      </Container>
    );
  }
}

второй компонент

updateItemsStatus = (id) => {
    this.itemsCollection.doc(id).update({
      status: 3,
      updated_at: new Date(),
    });
    return true;
  }

третий компонент

<TouchableOpacity
  onPress={() => {this.props.navigation.navigate('first component')}}
>
  <Text>Close Modal</Text>
</TouchableOpacity>

Answer 1

Насколько я понимаю, ваша проблема в том, что ваши данные не обновляются после закрытия модального окна.

Это потому, что вы получаете свои данные в ComponentDidmount(), который запускается один раз, а затем вы напрямую обновляете базу данных .

Во втором компоненте вы можете передать метод от вашего родителя, который обновит ваше состояние. Вот общий пример c:

class App extends React.Component {

  state = {...items};

  updateState = (newStatus) => {
    this.setState(prevState => ({...prevState, status:newStatus}));
    // or get data again from your db (careful about async)
  };
  render() {
    return (
      <Child updateState={updateState} />
    )
  }

}

class Child  extends React.Component {
  render(){
    return <TouchableOpacity onPress={() => this.props.updateState(3)}>Touch me daddy</TouchableOpacity>
  }
}