将 JSON 数据传递到反应本机的下一页（挂钩）

Question

我正在学习反应式。我正在使用钩子函数。没有json数据翻转使用hook函数的例子，留个问题

我想将 group_id 中的一个 json 数据传递到下一页。

function HomeScreen({navigation, route}) {
    const [loading, setLoading] = useState(true);
    const [localItem, setLocalItem] = useState([]);
    useEffect(() => {
        fetch("http://103.51.240.53:8000/GetBestSeller")
            .then((response) => response.json())
            .then((localItem) => {
            setLocalItem(localItem)
            setLoading(false)
            })
            .catch(function(error) {
                console.log('There has been a problem with your fetch operation: ' + error.message);
                 // ADD THIS THROW error
                throw error;
            });
    })
    
    <FlatList style={{backgroundColor:'block', opacity: 1}}
                    horizontal={true}
                    data={localItem}
                    renderItem={({item, index}) => 
                            <TouchableOpacity 
                            onPress={()=>navigation.navigate('Hot', itemID: item.group_id)}
                            style={{marginLeft: 10, alignItems: 'center', marginRight:10}}>
                     
                                <View style={{width: '100%', backgroundColor: '#02ad94', opacity: 0.5}}></View>
                                <Text style={{color: 'white', fontWeight: 'bold', fontSize:25, marginTop: 20}}>{item.name}</Text>
                            </TouchableOpacity>
                    }
                    keyExtractor={item => item.group_id}>
        </FlatList>

这是第一页。

 const Hot = ({route}) => {
    const { itemId }          = route.params;
    const { otherParam }      = route.params;
    return (
    <View>
      <Text style={styles.carouselText}>{itemID: item.group_id}</Text>
    </View>
    )
   }

这是第二页。

我尝试使用“navigation.navigate('Hot', itemID: item.group_id)”传递它，但没有成功。

Answer 1

我不认为 navigation.navigate('Hot', itemID: item.group_id) 是有效的 javascript 语法

改为尝试 -

navigation.navigate('Hot', {itemID: item.group_id})

javascript 对象包裹在 {}

中

react 导航文档有一个示例正好涵盖了这一点。 - link

将 JSON 数据传递到反应本机的下一页（挂钩）

Pass JSON data to next page in react native (hook)

navigation

authentication

reactjs

react-native

stack-navigator