React 16.3：传递给子类组件的Props无效问题求助

我来帮你排查这个父子组件props传递的问题，你遇到的this.props.foo为undefined的情况，在React 16.3里通常是这几个常见原因，咱们一步步来解决：

1. 最容易遗漏：子组件调用时没显式传递props #

这是90%以上的情况！父组件的state不会自动传递给子组件，必须在渲染子组件时手动把foo作为属性传过去。

比如你可能写了：

// 错误写法：没传foo属性
render() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <Child /> {/* 这里没传foo！ */}
    </div>
  );
}

改成正确的写法：

// 正确写法：显式传递foo
render() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <Child foo={this.state.foo} /> {/* 这里必须传foo */}
    </div>
  );
}

2. 子组件构造函数没正确调用super(props) #

如果你的子组件定义了constructor，必须把props传给super()，否则在constructor内部this.props会是undefined（虽然render里能拿到，但如果在constructor里用到this.props.foo就会出错）。

错误写法：

class Child extends Component {
  constructor(props) {
    super(); // 没传props
    console.log(this.props.foo); // 这里会是undefined
  }
  render() {
    return <div>{this.props.foo}</div>; // 这里可能能拿到，但不规范
  }
}

正确写法：

class Child extends Component {
  constructor(props) {
    super(props); // 必须传递props
    console.log(this.props.foo); // 现在能正确拿到值
  }
  render() {
    return <div>{this.props.foo}</div>;
  }
}

3. 拼写错误：state键名和props键名不一致 #

检查父组件state里的键是不是foo，有没有写成fooo/Foo这种拼写错误；同时检查传递给子组件的属性名是不是和子组件里用的this.props.foo一致，比如别传了foo={this.state.foo}，子组件里却写this.props.bar。

4. 子组件被高阶组件（HOC）包裹时没传递props #

如果你的子组件用了高阶组件（比如一些状态管理、权限控制的HOC），要确保HOC把接收到的props全部传递给内部的子组件。

错误的HOC示例（没传props）：

const withAuth = (WrappedComponent) => {
  return class extends Component {
    render() {
      // 这里没传props，导致WrappedComponent拿不到foo
      return <WrappedComponent />;
    }
  };
};

正确的HOC示例（传递所有props）：

const withAuth = (WrappedComponent) => {
  return class extends Component {
    render() {
      // 用展开运算符传递所有props
      return <WrappedComponent {...this.props} />;
    }
  };
};

排查小技巧 #

如果以上方法都没用，你可以加一些日志来定位问题：

• 在父组件的render方法里打印console.log('父组件state.foo:', this.state.foo)，确认state里确实有值
• 在子组件的render方法里打印console.log('子组件props:', this.props)，看看props对象里有没有foo属性

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