React父组件向子组件传值失败，请求代码错误排查

核心错误：子组件接收props的方式不对 #

React组件的参数是一个完整的props对象，不是直接接收单个属性。你现在写function ChildComponent(getData)，这里的getData其实是整个props对象，根本不是父组件传过来的那个数据属性，自然拿不到值。

两种修复方法 #

方法一：解构props（推荐） #

直接在组件参数里解构出需要的getData：

export default function ChildComponent({ getData }) {
  useEffect(() => {
    console.log("从父组件拿到的数据: ", getData)
  }, [getData]) // 加上依赖项，只有数据变化时才执行
})

方法二：通过props对象访问 #

如果不想解构，就通过props对象的属性来获取：

export default function ChildComponent(props) {
  useEffect(() => {
    console.log("从父组件拿到的数据: ", props.getData)
  }, [props.getData]) // 对应修改依赖项
})

额外提示 #

• 父组件里的useEffect记得加上合适的依赖项，避免无端重复执行
• 子组件的useEffect必须加[getData]作为依赖，不然每次组件渲染都会打印日志，不符合性能最佳实践

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