通過導航道具傳遞狀態

Question

有人可以解釋一下為什么這不能像我期望的那樣工作。我正在嘗試使用反應導航從一個屏幕導航到另一個我希望將一個值從一個屏幕傳遞到另一個屏幕（我保持我的價值來自狀態在父組件和我的2個函數中，它們改變了狀態值）。當我導航到我的子組件時，我從狀態和兩個函數傳遞值。

主要的問題是當我觸發2個功能時，我看不到子屏幕上的任何變化，但是當我回到我的父屏幕時，已經進行了更改，並且它們在屏幕上可見。

我試過使用this.forceUpdate（）但它仍然無法正常工作。

有幫助嗎？

這是我的parrent組件，我保持狀態和改變我的狀態的功能

import React from 'react';
import { Text, View, TouchableHighlight, Image, ScrollView, FlatList } from 'react-native';

export default class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 2
    };
  }

  incrementValue = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  decrementValue = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };

  onPressButton = () => {
    this.props.navigation.navigate('Child', {
      value: this.state.value,
      incrementValue: this.incrementValue.bind(this),
      decrementValue: this.decrementValue.bind(this)
    });
  };

  render() {
    return (
      <View>
        <Text>parrent component</Text>
        <TouchableHighlight onPress={() => this.onPressButton()}>
          <Text style={{ color: 'red' }}>go to child</Text>
        </TouchableHighlight>
        <Text>state value : {this.state.value}</Text>
      </View>
    );
  }
}

這是我的孩子組成部分：

import React from 'react';
import { Text, View, TouchableHighlight, Image, ScrollView, FlatList } from 'react-native';

export default class Child extends React.Component {
  constructor(props) {
    super(props);
  }

  onPressIncrement = () => {
    this.props.navigation.state.params.incrementValue();
    this.forceUpdate();
  };

  onPressDecrement = () => {
    this.props.navigation.state.params.decrementValue();
    this.forceUpdate();
  };

  render() {
    const { navigation } = this.props;
    const value = navigation.getParam('value');
    alert(value);
    return (
      <View>
        <Text>Child component</Text>
        <Text>{value}</Text>
        <TouchableHighlight onPress={() => this.onPressIncrement()}>
          <Text>incrementValue</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={() => this.onPressDecrement()}>
          <Text>decrementValue</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Answer 1

這是正常的。 您只需在第一次調用Child屏幕時渲染您的value prop。

您的prop更改有一個名為ComponentDidUpdate的生命周期方法。 一旦你的道具變化，就會觸發它。

例如，您可以在Child Screen使用這樣的，

componentDidUpdate(prevProps) {
  const value = navigation.getParam('value');
  console.log('prevProps', prevProps);
  console.log('new value', value);
}

您應該看到Parent Screen值狀態更改（您作為支持傳遞到Child Screen ），然后ComponentDidUpdate應該以新值觸發。

編輯：觸發componentDidUpdate並訪問新值后。 您可以使用setState作為觸發器渲染功能。

constructor(props) {
    super(props);
    this.state = {
      value: navigation.getParam('value');
    }
  }

componentDidUpdate(prevProps) {
  const value = navigation.getParam('value');
  this.setState({ value });
}

render() {
    const { navigation } = this.props;
    return (
      <View>
        <Text>Child component</Text>
        <Text>{this.state.value}</Text>
        <TouchableHighlight onPress={() => this.onPressIncrement()}>
          <Text>incrementValue</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={() => this.onPressDecrement()}>
          <Text>decrementValue</Text>
        </TouchableHighlight>
      </View>
    );
  }

希望它有效。