如何從子組件更改父組件的 State？

Question

我想做的事

在我的第一個組件中，我得到狀態為 2 的項目並將它們放入復選框。

在我的第二個組件中，我將項目的狀態更改為 3。

我是第三個組件，在第二個組件中更改狀態后，模態打開。

當 Modal 關閉時，導航會返回到第一個組件。

問題是我更改其狀態的項目仍在第一個組件中。

他們的狀態是 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()中獲取數據，然后直接更新數據庫。

在您的第二個組件中，您可以從您的父級傳遞一個方法，該方法將更新您的 state。 這是一個通用示例：

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>
  }
}