React新手求助：报错this.props.addNew is not a function

兄弟，刚上手React遇到这种props相关的报错太正常了，我帮你拆解几个最可能的原因和解决办法：

1. 父组件没正确传递addNew作为props #

这是最常见的问题！你得确保在渲染<HelloUser>的父组件里，把addNew函数通过props传进去。比如父组件的代码应该是这样的：

// 父组件示例
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 绑定方法的this，不然传递给子组件时this会丢失
    this.addNew = this.addNew.bind(this);
  }

  addNew(newFriend) {
    // 这里是你的添加逻辑，比如更新父组件状态
    console.log('添加新朋友:', newFriend);
  }

  render() {
    // 关键：一定要把addNew作为props传给HelloUser
    return <HelloUser addNew={this.addNew} />;
  }
}

如果父组件里没写addNew={this.addNew}，那子组件的this.props.addNew自然不存在，就会报错。

2. addTheFriend函数的this指向错误 #

如果你的addTheFriend是HelloUser组件里的类方法，那很可能是这个方法的this没绑定到组件实例，导致里面的this.props不是你期望的。解决办法有两种：

方法一：在constructor里绑定this #

class HelloUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '' };
    // 绑定addTheFriend的this到组件实例
    this.addTheFriend = this.addTheFriend.bind(this);
  }

  addTheFriend() {
    // 现在这里的this就能正确指向组件实例，拿到props里的addNew
    this.props.addNew(this.state.name);
  }

  // ...其他代码
}

方法二：用箭头函数定义类方法 #

箭头函数会自动绑定当前上下文的this，不用手动绑定：

class HelloUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '' };
  }

  // 用箭头函数定义方法
  addTheFriend = () => {
    this.props.addNew(this.state.name);
  }

  // ...其他代码
}

3. 父组件里的addNew不是函数 #

检查父组件中的addNew是不是真的定义成了函数，有没有不小心写成了变量或者其他类型。比如别写成addNew: 'add'这种字符串，必须是一个函数：

// 错误示例
addNew = '添加朋友'; // 这不是函数，传给子组件后调用就会报错

// 正确示例
addNew = (friend) => {
  // 你的逻辑
}

你可以先从这几个方向排查，应该能解决问题！

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