时间戳

首页 > 解决方案 > 在本机反应中将 JSON 数据传递到下一页（钩子）

reactjs - 在本机反应中将 JSON 数据传递到下一页（钩子）

问题描述

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

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

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）”将其传递，但​​它没有用。

标签： reactjsreact-nativeauthenticationnavigationstack-navigator

解决方案

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

而是尝试 -

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

javascript对象被包裹在{}

反应导航文档有一个完全涵盖这一点的示例。-链接

推荐阅读