javascript - How to send data to the parent page using React Native Navigation (v5)? - Stack Overflow

admin管理员组

文章数量:1356859

I'm using / (version 5.0.1) in my project with GraphQL Apollo client.

I have a page with a form where the user needs to select some options from a list.
In the first page, I have a button with this code:

props.navigation.navigate('SelectTagsPage', {
            onSelect: (selectedIds) => {
              // update the form state
              setTagsIds(selectedIds)
            },
          });

On the tags page I have this:

const { onSelect } = props.route.params;

//...

<Button onPress={() => { onSelect(ids) }}>

So, basically I'm passing a function when calling the navigation.navigate, and I'm executing this function to send data back to the initial screen.

This is working very well, however when I open the TagsPage I'm getting this warning:

We found non-serializable values in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params

If passing a function in the params is a problem, what is the best way to achieve the same functionality of sending data from a page to the parent page and solve this warning message?

I'm using https://reactnavigation/ (version 5.0.1) in my project with GraphQL Apollo client.

I have a page with a form where the user needs to select some options from a list.
In the first page, I have a button with this code:

props.navigation.navigate('SelectTagsPage', {
            onSelect: (selectedIds) => {
              // update the form state
              setTagsIds(selectedIds)
            },
          });

On the tags page I have this:

const { onSelect } = props.route.params;

//...

<Button onPress={() => { onSelect(ids) }}>

So, basically I'm passing a function when calling the navigation.navigate, and I'm executing this function to send data back to the initial screen.

This is working very well, however when I open the TagsPage I'm getting this warning:

We found non-serializable values in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params

If passing a function in the params is a problem, what is the best way to achieve the same functionality of sending data from a page to the parent page and solve this warning message?

• javascript
• react-native
• react-navigation
• react-native-navigation

Share Improve this question Follow asked Feb 21, 2020 at 21:09 VictorVictor 5,13133 gold badges4444 silver badges5656 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can pass them as params:

navigation.navigate('NameOfPreviousScreen', { selectedIds });

When you navigate to a previous screen, it acts like goBack, but also passes any params you want.

https://reactnavigation/docs/en/params.html

本文标签： javascriptHow to send data to the parent page using React Native Navigation (v5)Stack Overflow