React Native组件间数据传递失效问题求助

问题描述 #

按文档操作并尝试本站解决方案后，页面仍无法渲染props数据，页面无任何内容显示。已完成子组件导入及配置，附上父组件及三次子组件尝试代码。

父组件代码（原代码） #

const ToyDetails = () => {
  const [data, setData] = useState('');

  const parentToChild = () => {
    setData(name)
  }

  return (
    <View>
        <CardCard parentToChild={data}
        <TouchableOpacity onPress={()=>parentToChild()}
          <Text>{buttonText}</Text>
    </View>
  )
}

子组件尝试代码 #

尝试1：类组件解构props #

export default class CartCard extends Component {
  render() {
    const { data } = this.props;
      return (
        <View>
          <Text>{data}</Text>
        </View>
      )
   }
}

尝试2：类组件直接调用props #

export default class CartCard extends Component {
  render() {
    const { data } = this.props;
      return (
        <View>
          <Text>{this.props.parentToChild}</Text>
        </View>
      )
   }
}

尝试3：函数组件解构props #

const CartCard = ({parentToChild}) => {
   
  return (
    <View>
      <View>
        <Text>{parentToChild}</Text>
      </View>
    </View>
  )
}

export default CartCard

问题根源 #

1. 父组件语法错误：<CardCard>、<TouchableOpacity>标签未闭合，且未定义name、buttonText变量，点击按钮时setData(name)会触发报错，直接导致组件无法正常渲染。
2. props名称不匹配：尝试1中父组件传递的props是parentToChild，但子组件解构的是data，无法获取到值。
3. 初始值为空：父组件data初始值为空字符串，即使props传递正确，初始状态下页面也会显示空白。

修正后的代码 #

父组件 #

import { useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import CartCard from './CartCard'; // 确认导入路径正确

const ToyDetails = () => {
  const [data, setData] = useState('');
  // 定义缺失的变量
  const name = '测试玩具';
  const buttonText = '点击传递数据';

  const parentToChild = () => {
    setData(name);
  };

  return (
    <View>
      {/* 闭合组件标签 */}
      <CartCard parentToChild={data} />
      {/* 修复TouchableOpacity和Text标签的闭合问题 */}
      <TouchableOpacity onPress={parentToChild}>
        <Text>{buttonText}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default ToyDetails;

子组件（推荐函数组件写法） #

import { View, Text } from 'react-native';

const CartCard = ({ parentToChild }) => {
  return (
    <View>
      {/* 添加默认值，避免初始空白 */}
      <Text>{parentToChild || '暂无数据'}</Text>
    </View>
  );
};

export default CartCard;

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