Передача данных обратно компоненту с помощью встроенной навигации - PullRequest
0 голосов
/ 02 марта 2020

У меня есть основной App.js, где я реализовал StackNavigator:

export default class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="MainPage" component={MainPage} />
          <Stack.Screen name="Submit" component={Submit} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

Я хочу передать данные из компонента Submit в мой MainPage и отобразить их в ScrollView из array: arr в state из MainPage.

Mainpage выглядит следующим образом. Я хочу передать функцию addNode добавлению узла в state моего MainPage:

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      arr: [],
      liters: '',
      time: '',
    };
  }

  addNode = (time, liters) => {
    if (this.state.time) {
      this.state.arr.push({calc: time + liters});
      this.setState({time: ''});
      this.setState({liters: ''});
    }
  };

  onPress = () => {
    this.props.navigation.navigate('Submit', {addNode: this.addNode});
  };

  render() {
    return (
      <View>
        <ScrollView>{this.state.arr}</ScrollView>
        <TouchableOpacity onPress={this.onPress}>
          <Text>+</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Мой Submit компонент выглядит следующим образом. на кнопке Submit я хочу передать данные из входных данных в MainPage, добавить их в массив и затем отобразить в виде прокрутки:

class Submit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      liters: '',
      time: '',
    };
  }

  goBack() {
    this.props.navigation.goBack();
    this.props.navigation.state.params.addNode({
      time: this.state.time,
      liters: this.state.liters,
    });

  }
  render() {
    return (
      <View>
        <Text>Form</Text>
        <TextInput
          onChangeText={time => this.setState({time})}
          value={this.state.time}
        />
        <TextInput
          onChangeText={liters => this.setState({liters})}
          value={this.state.liters}
        />
        <Button title="Submit" onPress={this.goBack} />
      </View>
    );
  }
}

Когда я нажимаю Submit из моего Submit компонента Я получаю сообщение об ошибке на этом экране:

enter image description here

Мой вопрос: как передать данные обратно в компонент parent из компонента children, используя StackNavigator? Что я здесь не так делаю?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...