Expo开发React Native页面崩溃求助：函数作为React子元素报错

报错信息 #

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of

return (<Component />)

from render. Or maybe you meant to call this function rather than return it.

问题定位与修复 #

1. 函数直接作为React子元素（核心崩溃原因） #

在Cart组件的渲染代码中，你直接将countAllItems和countTotal这两个函数作为Text组件的子元素，而非调用它们获取返回值。同时，Text组件不需要value和onChangeText属性（这些是TextInput的专属属性），这两个错误共同引发了崩溃。

错误代码片段：

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

修复思路：

• 移除Text组件上的value和onChangeText属性
• 将函数调用改为执行形式，或通过状态维护计算结果（推荐后者，避免渲染时重复计算）

修复后代码（状态维护版）：

// 在数据变化时自动计算并更新状态
useEffect(() => {
  setAllItems(details.length);
  setTotal(details.reduce((sum, item) => sum + (item.price || 0), 0));
}, [details]);

// 渲染时直接使用状态值
<Text>Overall Items: {allItems}</Text>
<Text>Total Price: ${total}.00</Text>

2. AsyncStorage数据未正确解析 #

getData函数中，从AsyncStorage获取的是字符串格式数据，但你直接将字符串赋值给details状态，未用JSON.parse解析。同时代码缺少AsyncStorage的导入。

修复后getData函数：

// 先导入AsyncStorage
import AsyncStorage from '@react-native-async-storage/async-storage';

const getData = async() => {
  try {
    const getValues = await AsyncStorage.getItem('object');
    if(getValues !== null){
      const parsedData = JSON.parse(getValues);
      console.log(parsedData);
      setDetails(parsedData); // 赋值解析后的数组/对象
    }
  }catch(error){
    console.log('getData didnt work', error);
  }
}

3. 嵌套ScrollView的滚动冲突问题 #

Cart组件外层已使用ScrollView，ItemCard内部又嵌套了ScrollView，会导致滚动行为异常，建议移除ItemCard中的ScrollView：

修改后的ItemCard组件：

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

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

export default ItemCard

const styles = StyleSheet.create({ /* 你的样式定义 */ })

修改后的完整Cart组件代码 #

import { StyleSheet, Text, View, TouchableOpacity, ScrollView, TextInput } from 'react-native'
import React, { useState, useEffect } from 'react'
import AsyncStorage from '@react-native-async-storage/async-storage';
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){
        const parsedData = JSON.parse(getValues);
        console.log(parsedData);
        setDetails(parsedData);
      }
    }catch(error){
      console.log('getData didnt work', error);
    }
  }

  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)

  useEffect(() => {
    // 购物车数据更新时自动计算数量和总价
    setAllItems(details.length);
    setTotal(details.reduce((sum, item) => sum + (item.price || 0), 0));
  }, [details]);

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

  return (
    <ScrollView style={{backgroundColor: 'white', height: '100%'}}>
      <ItemCard />
        <View>
          <View style={styles.payment}>
            <Text>Your Shopping Cart</Text>
            <View>
              <Text>Overall Items: {allItems}</Text>
              <Text>Total Price: ${total}.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({ /* 你的样式定义 */ })

内容的提问来源于stack exchange，提问作者paparonnie