Question

我想要一个页面，其中包含从后端获取的数据列表。列表中的每个值都会有一个“获取更多详细信息”按钮，单击该按钮将显示单个数据的每个项目。我正在尝试使用useContext钩子将项目数据传递到下一页，但是数据在下一页中显示为未定义。

GetOrders.js

WorkoutsMainController

CustomerOrder.js

export const orderContext = React.createContext()
const GetOrders = ({ navigation }) => {

renderOrdersData = ({ item }) => {
    return (
      <orderContext.Provider value={ item }>

      <TouchableOpacity onPress={() => showAddress(item)} style={[styles.item]}>
        <View style={styles.textstyles}>
       
          <View style={styles.contentstyle}>
            <Text style={styles.title}>Name: {item.customer.name}</Text>
            <Text style={styles.title}>Quantity: {item.orders.quantity} </Text>
            <Text style={styles.title}>Contact: {item.customer.contact}</Text>
          </View>
        
          <View style={styles.paidbuttonstyles} >
            <Button title="Get more details"
              onPress={() => navigation.navigate('CustomerOrder') }
            />
          </View>
        </View>
      </TouchableOpacity>
      </orderContext.Provider>


    );
  };

return (
        <SafeAreaView style={styles.container}>
          <Text style={styles.textcss}> Your Pending orders are </Text>
          <FlatList
            style={styles.listcolor}
            data={orders}
            renderItem={renderOrdersData}
          />
        </SafeAreaView>
      );
}

每当我按下“ GetCustomer地址”按钮时，都会出现异常

import { orderContext } from './GetOrders'
const CustomerOrder = ({ navigation }) => {

  let items = useContext(orderContext)


  showAddress = () => {

    console.log(" inside showadress" + items);

    console.log(" inside showadress json " + JSON.stringify(items));
   }

   return (
     <View style={styles.dismissbuttonstyles} >
        <Button title="Get Customer address"
          onPress={() => showAddress()}
        />
      </View>
   );
}

有什么帮助吗？谢谢

Usecontext返回未定义-React Native

0 个答案: