React向子组件传递Props报错：Cannot read property 'name' of undefined

我来帮你分析下这个错误的原因，其实问题出在子组件的render方法写法上，咱们一步步拆解：

错误根源 #

React组件的render函数默认接收的是完整的props对象，而不是直接把props里的字段拆成参数传入。你现在子组件里写的render({ name, street, state })，相当于试图从render的第一个参数（也就是props）里直接解构这三个属性，但实际上你的子组件从App接收到的props只有一个data字段（因为App里是<From data={ from } />这样传递的），所以解构出来的name、street、state全都是undefined，自然会抛出Cannot read property 'name' of undefined的错误。

两种修复方案 #

方案1：子组件从props.data中解构属性

修改子组件的render方法，先拿到props.data再解构需要的字段：

render(props) {
  const { name, street, state } = props.data;
  return (
    <div className="From">
      <span> { name } </span>
      <br />
      <span> { street } </span>
      <br />
      <span> { state } </span>
    </div>
  )
}

方案2：传递props时直接展开属性（更简洁）

如果你想让子组件直接拿到name、street这些属性，可以修改App组件里的传递方式，用扩展运算符把from/to的字段直接传给子组件：

// App组件的render部分
return (
  <div className="Envelope">
    <Stamp />
    <From {...from} />
    <To {...to} />
  </div>
);

这样子组件的render就可以直接从props里解构字段了，写法也和你原来的思路一致：

// 两种写法都可行
render({ name, street, state }) {
// 或者先接收props再解构：
// render(props) {
//   const { name, street, state } = props;
  return (
    <div className="From">
      <span> { name } </span>
      <br />
      <span> { street } </span>
      <br />
      <span> { state } </span>
    </div>
  )
}

小优化提示 #

你的App组件里写的const { from, to } = {...this.props.data }其实没必要用扩展运算符，直接写成const { from, to } = this.props.data;就可以了，展开操作在这里是多余的哦。

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