React组件间传参异常：子组件接收props始终为undefined

问题出在props的键名不匹配：你父组件是通过data={ideas}把状态传给BasicTable的，但子组件却尝试解构{ideas}来接收——React里props是键值对，你传的键是data，子组件就得对应取data，不然肯定拿不到值。

给你两种直接解决的方式：

方式一：修改子组件的接收逻辑 #

子组件里把解构的ideas改成data，如果习惯用ideas这个变量名，可以用重命名语法：

// BasicTable组件
const BasicTable = ({ data: ideas }) => {
  // 现在ideas就能拿到父组件传过来的值了
  console.log(ideas);
  return <div>{/* 你的表格渲染逻辑 */}</div>;
};

方式二：修改父组件的传值属性名 #

如果想让子组件直接解构ideas，那父组件传值时把属性名改成ideas：

// 父组件渲染部分
return (
  <div>
    <BasicTable ideas={ideas} />
  </div>
);

// 子组件接收
const BasicTable = ({ ideas }) => {
  console.log(ideas);
  return <div>{/* 你的表格渲染逻辑 */}</div>;
};

额外注意 #

如果父组件的ideas初始状态是undefined或null，子组件最好加个容错处理，避免渲染报错：

const BasicTable = ({ data: ideas }) => {
  if (!ideas) return <div>加载中...</div>;
  // 后续渲染逻辑
};

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