React中父组件接收子组件数据后无法传递至Child2的问题求助

先看你代码里的几个致命错误，这些是导致Child2拿不到数据的核心原因：

1. 组件名必须大写 #

React规定自定义组件名首字母必须大写，否则会被当成原生HTML标签处理，props根本传不进去。把parent改成Parent，child1改成Child1，child2改成Child2。

2. Child1没接收props参数 #

Child1组件定义时没接收props，导致内部拿不到父组件传的getData和setitem，自然没法把selectFood传给父组件。修改Child1的定义：

const Child1=(props)=>{ // 这里要加上props参数
  // ... 内部代码
}

3. selectedItem函数参数错误 #

onClick的回调函数默认接收的是点击事件对象，不是props。你之前把参数命名为props，实际拿到的是事件e，导致调用props.getData时出错。修改selectedItem：

const selectedItem=()=>{
  // 直接用组件的props，不用传参数
  props.getData(selectFood);
  // 这里没必要同时调用setitem，因为getData里已经调用了，二选一就行
}

4. 父组件未返回JSX #

父组件里的JSX没有被return包裹，React函数组件必须返回JSX内容，否则组件不会渲染，状态也无法更新。给父组件加上return：

const Parent=()=>{
  const [item,setitem]=useState([]);

  const getData=(value)=>{
    setitem(value);
  };

  // 用return包裹JSX，用React.Fragment（<>...</>）包裹多个组件
  return (
    <>
      <Child1 getData={getData} item={item} setitem={setitem}/>
      <Child2 item={item} setitem={setitem}/>
    </>
  );
}

修正后的完整代码 #

Parent组件 #

import React, { useState } from 'react';
import Child1 from './Child1';
import Child2 from './Child2';

const Parent=()=>{
  const [item, setItem]=useState([]); // 变量名建议用驼峰，setitem改成setItem

  const getData=(value)=>{
    setItem(value);
  };

  return (
    <>
      <Child1 getData={getData} item={item} setItem={setItem}/>
      <Child2 item={item} setItem={setItem}/>
    </>
  );
}

export default Parent;

Child1组件 #

import React from 'react';

// 假设selectFood是已定义好的数组
const selectFood = ['苹果', '香蕉']; // 示例数据

const Child1=(props)=>{
  const selectedItem=()=>{
    props.getData(selectFood);
    // 去掉重复的props.setItem(selectFood)，避免重复更新状态
  };

  return(
    <div>
      <button onClick={selectedItem}>Done</button>
    </div>
  );
}

export default Child1;

Child2组件 #

import React from 'react';

const Child2=(props)=>{
  // 可以用useEffect监听item变化，否则只会在组件挂载时打印一次
  React.useEffect(()=>{
    console.log('Child2接收的item:', props.item);
  }, [props.item]);

  return <div>Child2显示数据：{props.item.join(', ')}</div>;
}

export default Child2;

额外说明 #

之前Child2拿不到数据，本质是父组件的item状态根本没被正确更新——因为Child1没接收props，无法调用父组件的getData或setItem，再加上组件名小写导致React没有正确识别组件，props传递失效。修正后，点击Child1的Done按钮，父组件状态更新，Child2会自动接收到最新的item数据。

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