reactjs React本机页面不断崩溃,我看不出原因

kwvwclae  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(123)

我在Expo上做了一个react native应用程序,但是每次我尝试进入这个页面时,整个应用程序都会崩溃。这是我第一次使用react native,我还是一个初学者,但是我看不出问题的原因。我得到的错误是Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.,但是我看不出是哪里

import { StyleSheet, Text, View, TouchableOpacity, ScrollView, TextInput } from 'react-native'
import React, { useState, useEffect } from 'react'
// import CartCard from '../Components/CartCard'
import ItemCard from '../Components/ItemCard'

const Cart = ({navigation}) => {

  const [details, setDetails] = useState([])

  useEffect(()=>{
      getData() 
    }, []) 

  const getData = async() => {
    try {
      const getValues = await AsyncStorage.getItem('object')
      if(getValues !== null){
        console.log(JSON.parse(getValues))
        setDetails(getValues)
        // const objectValues = JSON.parse(getValues)
        // setDetails(objectValues)
        // getValues.forEach(object => {
        //   console.log("id:", object.id)
        //   setToyId(object.id)
        // })
      }
    }catch(error){
      console.log('getData didnt work')
    }
  }

  const [cardholder, setCardholder] = useState('');
  const [cardNumber, setCardNumber] = useState('');
  const [expiryDate, setExpiryDate] = useState('');
  const [cvc, setCvc] = useState('');

  const [allItems, setAllItems] = useState(0);
  const [total, setTotal] = useState(0)

  const clearCart = () => {
    console.log('cc')
  }

  const countAllItems = () => {
    console.log('cai')
  }

  const countTotal = () => {
    console.log('ct')
  }

  return (
    <ScrollView style={{backgroundColor: 'white', height: '100%'}}>
      <ItemCard />
        <View>
          <View style={styles.payment}>
            <Text>Your Shopping Cart</Text>
            <View>
              <Text value={allItems} onChangeText={(value)=>{setAllItems(value)}}>Overall Items: {countAllItems}</Text>
              <Text value={total} onChangeText={(value)=>{setTotal(value)}}>Total Price: ${countTotal}.00</Text>
            </View>
          </View>
          <Text>Payment</Text>
          <TextInput placeholder='Cardholder Name' style={styles.inputsLong} placeholderTextColor='black' value={cardholder} onChangeText={(value)=>setCardholder(value)}/>
          <TextInput placeholder='Card Number' style={styles.inputsLong} placeholderTextColor='black' value={cardNumber} onChangeText={(value)=>setCardNumber(value)}/>
          <View style={styles.shortForm}>
            <TextInput placeholder='MM/YY' style={styles.inputsShort} placeholderTextColor='black' value={expiryDate} onChangeText={(value)=>setExpiryDate(value)} />
            <TextInput placeholder='CVC' style={styles.inputsShort} placeholderTextColor='black' value={cvc} onChangeText={(value)=>setCvc(value)}/>
          </View>
          <View style={styles.buttonRow}>
            <TouchableOpacity>
              <Text style={styles.cancelButton} onPress={clearCart}>Cancel Order</Text>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text style={styles.orderButton} onPress={()=>navigation.navigate('ConfirmScreen')}>Place Order</Text>
            </TouchableOpacity>
          </View>
        </View>
    </ScrollView>
  )
}

export default Cart

const styles = StyleSheet.create({ // styles })

ItemCard组件还没有接受任何参数,因为我在存储数据和在页面之间传递数据时遇到了问题,但组件的当前状态如下所示:

import { StyleSheet, Text, View, ScrollView } from 'react-native'
import React from 'react'

const ItemCard = () => {

    return (
    <ScrollView>
        <View style={styles.itemSection}>
            <View style={styles.card}></View>
        </View>
    </ScrollView>
  )
}

export default ItemCard

const styles = StyleSheet.create({ // styles })
9lowa7mx

9lowa7mx1#

对于此警告
警告:函数作为React子级无效。如果返回组件而不是从呈现器返回组件,则可能会发生这种情况。或者,您可能希望调用此函数而不是返回它。
必须调用函数,例如countTotal()

<Text value={total} onChangeText={(value)=>{setTotal(value)}}>Total Price: ${countTotal()}.00</Text>

如果使用onPress,则如下所示

<Text style={styles.cancelButton} onPress={()=>clearCart()}>Cancel Order</Text>

相关问题