Question

我正在尝试将状态从主页传递到详细信息页面。详细信息页面通过调用函数（通过props）成功更改了父状态。但是，不会触发重新渲染，并且不会更新详细信息页面（尽管它具有正确更新的道具）。如何将状态传递给子页面（详细信息），使其触发其重新呈现？

似乎有人问了类似的问题here 但我不太了解。我没有使用redux，因为这是一个小应用程序。

//Navigator Setup
const AppNavigator = createStackNavigator({
    Home: {
        screen: Home} 
    Details: {
        screen: Details}
);

//Home page:
this.props.navigation.navigate("Details", {
    changeDetails: this.changeDetails
    details: this.state.details})
}

//Details page
let details = props.navigation.getParam("details", "n/a");
let changeDetails = props.navigation.getParam("changeDetails", "n/a");

//change things
//render stuff

Answer 1

如文件所述：

this.props.navigation.navigate('YOUR TARGET NAME', {
          itemId: 86,
          otherParam: 'anything you want here',
        });

here是一个很好的例子，祝你好运

编辑： 在componentDidUpdate()方法的子组件中，您必须检查是否更改了道具并将新道具设置为state，然后该组件将使用新状态重新渲染：

componentDidUpdate(){
      if ('YOUR DATA FROM PARENT' != 'PREVIOUS DATA FROM PARENT SAVED IN STATE'){
                this.setState({yourState: 'YOUR DATA FROM PARENT'})
       }

Answer 2

您已经以正确的方式传递了数据，但是在提取数据时却出错了 let details = props.navigation.getParam("details", "n/a"); 只需放this.props 像这样 console.log(props.navigation.getParam.changeDetails); console.log(props.navigation.getParam.details) console.log仅用于调试目的，您可以将其分配给任何变量，然后您将以对象形式或json形式接收数据。在构造函数，render（）或要使用此数据的位置设置此数据< / p>

Answer 3

使用navigation.navigate传递数据不会触发重新渲染，因为它正在传递道具的副本。您将需要寻找其他发送道具的方法，以便您的组件知道更改。例如，您可以将组件连接到Redux状态（假设您正在使用Redux）。如果您不使用redux，则可以将刷新功能从父组件navigate('Child', { refresh: refreshFunction }发送给子组件

然后，您可以在后退操作之前在子级（通过类似this.props.navigation.state.params.refresh();或const refresh() = this.props.navigation.getParam('regresh')的方式中使用此功能）。这将触发更新父状态以进行更新。

希望对您有帮助

如何使用React导航在页面之间传递状态？

3 个答案: