如何将数据传递给先前的屏幕，并使用React导航6。

发布于 2025-02-03 11:30:14 字数 963 浏览 1 评论 0原文

我正在尝试将所选的数据传递给我从REST API获取的数据回到上一个屏幕。我关注了文档，但它不起作用。不知道我在做什么错。

我正在使用选定的数据更新状态，并且知道它正在运行BC，我正在成功地将其打印出来。

这是调用函数导航的按钮，在屏幕B中传递了带有所选数据的状态：

<Pressable onPress={() => postSelected(selectedData)} >
    <Text style={{fontSize: 13, color: 'white', fontWeight: '700', paddingRight: 5}}>{'Select'}</Text>
</Pressable>

这是函数（屏幕B）：

const postSelected = (selectedData) => {
    navigation.navigate({
      name: 'CreatePost',
      params: { postData: selectedData },
      merge: true
    });
}

在屏幕A中，我有一个使用效率，可以从屏幕B：

useEffect(() => {
    if (route.params?.postData) {
      console.log('Sent');
    }
  }, [route.params?.postData]);

但这没有收到数据。

我正在关注这些文档： https：//reactnavigation..org/docs/params/params/

呢

原文

I am trying to pass the selected data i'm fetching from my rest api back to the previous screen. I followed the docs, but it's not working. Not sure what I am doing wrong.

I am updating the state w/ the selected data, and know it's working bc i am printing it out in console successfully.

This is the button that calls the function to navigate back, passing the state w/ selected data in Screen B:

<Pressable onPress={() => postSelected(selectedData)} >
    <Text style={{fontSize: 13, color: 'white', fontWeight: '700', paddingRight: 5}}>{'Select'}</Text>
</Pressable>

This is the function (Screen B):

const postSelected = (selectedData) => {
    navigation.navigate({
      name: 'CreatePost',
      params: { postData: selectedData },
      merge: true
    });
}

In Screen A, I have a useEffect that listens for the selected data from Screen B:

useEffect(() => {
    if (route.params?.postData) {
      console.log('Sent');
    }
  }, [route.params?.postData]);

But it's not receiving the data.

I was following these docs: https://reactnavigation.org/docs/params/

Appreciate any help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青春如此纠结 2025-02-10 11:30:14

您可以使用props.navigation.getParam（“ postdata”）方法从导航中获取参数

回复收藏 0 原文

浊酒尽余欢 2025-02-10 11:30:14

对我有用并遵循React-Navigation设定的最佳实践的解决方案如下

const MainScreen = ({ navigation }) => {

    // Here is where the returned data is detected
    React.useEffect(() => {
        if (route.params?.post) {
            // Do something with the data
        }

    }, [route.params?.post])

    const openChildScreen = () => {
        navigation.navigate('NewPostScreen')
    }
}

// ---------------------

const NewPostScreen = ({ navigation }) => {

    const goBackToMain = () => {
        // This is the data to be returned to the main screen
        const post = {
            // ...
        }
        navigation.navigate('MainScreen', { post });

    }
}

The solution that worked for me and follows the best practices set by react-navigation is as follows

const MainScreen = ({ navigation }) => {

    // Here is where the returned data is detected
    React.useEffect(() => {
        if (route.params?.post) {
            // Do something with the data
        }

    }, [route.params?.post])

    const openChildScreen = () => {
        navigation.navigate('NewPostScreen')
    }
}

// ---------------------

const NewPostScreen = ({ navigation }) => {

    const goBackToMain = () => {
        // This is the data to be returned to the main screen
        const post = {
            // ...
        }
        navigation.navigate('MainScreen', { post });

    }
}

回复收藏 0 原文

~没有更多了~