React Native Make State Change 从不同的组件答案

【问题标题】：React Native Make State Change From different componentReact Native Make State Change 从不同的组件
【发布时间】：2018-06-23 01:54:15
【问题描述】：

我正在使用本机反应，并且我有一种情况，我使用反应导航 v2 堆栈导航器导航到一个新组件。然后，用户按下一个选项并返回原来的屏幕并显示更新的信息。

我的问题是如何改变前一个屏幕的状态以显示用户选择的信息？

ShowFruitPage.js

此页面显示用户采摘的水果列表。

export default class ShowFruitPage extends Component{

  constructor(){
    super();

    this.state = {
      List: [{Fruit: apple}]
    }
  }

  render(){
    return(
      <View style={styles.ViewStyle}>
        <FlatList
          data={this.state.List}
          renderItem={({item}) =>

              <TouchableNativeFeedback
                background={TouchableNativeFeedback.Ripple('grey')}
                onPress={() => this.props.navigation.navigate('AddFruit',
                {
                  List: this.state.List
                })}

                <View style={styles.ListView}>
                  <Text>{item.Fruit}</Text>
                </View>

              </TouchableNativeFeedback>

          }
        />
      </View>
    )
  }
}

AddFruit.js

此页面显示用户可以选择的可用水果列表。当用户从此列表中选择时，我想更新 ShowFruitPage 上的列表。

export default class AddFruit extends Component{
  constructor(){
    super();

    this.state = {
      FruitList: [{Fruit:orange}, {Fruit: pear}]
    }

    this.pickFruit = this.pickFruit.bind(this);
  }

  pickFruit(Fruit){
    //Add the picked fruit to the ShowFruitPage state List

    //Then Navigate back to ShowFruitPage
    this.props.navigation.navigate('ShowFruitPage')
  }

  render(){
    return(
      <View style={styles.ViewStyle}>
        <FlatList
          data={this.state.FruitList}
          renderItem={({item}) =>

          <TouchableNativeFeedback
            background={TouchableNativeFeedback.Ripple('grey')}
            onPress={() => this.pickFruit(item)}
            <View style={styles.ListView}>
              <Text>{item.Fruit}</Text>
            </View>

          </TouchableNativeFeedback>

          }
        />
      </View>
    )
  }

}

【问题讨论】：

标签： reactjs react-native state react-navigation react-props

【解决方案1】：

就像您在 ShowFruitPage.js 中使用 List 所做的那样，您可以返回一些状态，即

this.props.navigation.navigate('ShowFruitPage', { Fruit });

当您导航回 ShowFruitPage 时，使 { Fruit } 在 navigation.state.params 上可用。

另一种可能性（我认为）是在您导航到 AddFruit 时提供一个回调，该回调可以在 ShowFruitPage 上设置数据，然后您只需调用 navigation.goBack() ：

setFruit = fruit => {
  this.setState({ FruitList: [...this.state.FruitList, fruit] });
}

this.props.navigation.navigate('AddFruit', { setFruit: this.setFruit });

然后：

pickFruit(Fruit){
  const { navigation } = this.props;

  navigation.state.params.setFruit(Fruit);
  navigation.goBack();
}

另一种更重的解决方案是实施一些状态管理，例如redux，以便数据独立于各个页面组件。

【讨论】：