Question

有人可以向我解释为什么这不符合我的预期。我正在尝试使用反应导航从一个屏幕导航到另一个屏幕，我想将一个屏幕的状态值传递给另一个屏幕（我将父状态的值保存在父组件中，还有两个用于更改状态值的函数）。当我导航到子组件时，我从state和两个函数中传递值。

主要问题是，当我触发这两个功能时，子屏幕上没有看到任何更改，但是当我返回到父屏幕时，所做的更改已经显示并且在屏幕上可见。 / p>

我尝试使用this.forceUpdate()，但仍然无法使用。

有帮助吗？

这是我的父组件，其中保留了状态以及更改状态的函数


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

这是正常的。您仅在value屏幕的第一次调用中渲染Child道具。

对于道具更改，有一个名为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>
    );
  }

希望它能起作用。

通过导航道具传递状态

1 个答案: