React双向绑定报错：TypeError: this.props.update is not a function 求助

嘿，我来帮你搞定这个双向绑定的问题！你遇到的TypeError: this.props.update is not a function本质上是子组件没拿到正确的父组件传递的更新函数，咱们一步步排查修复：

1. 先确认父组件是否正确传递了update函数 #

这个错误最常见的原因就是父组件压根没把update函数作为props传给子组件，或者传的时候名字写错了（比如父组件传的是onUpdate，但子组件里用this.props.update调用）。

父组件正确示例（类组件）： #

class Parent extends React.Component {
  // 初始化状态
  state = { inputValue: '' };

  // 定义更新状态的函数，用箭头函数自动绑定this
  updateInputValue = (newValue) => {
    this.setState({ inputValue: newValue });
  };

  render() {
    // 关键：把update函数作为props传给子组件，名字要和子组件里调用的一致（这里是update）
    return (
      <div>
        <Child value={this.state.inputValue} update={this.updateInputValue} />
        <p>父组件同步值：{this.state.inputValue}</p>
      </div>
    );
  }
}

父组件正确示例（函数组件+ useState）： #

import { useState } from 'react';

function Parent() {
  const [inputValue, setInputValue] = useState('');

  const updateInputValue = (newValue) => {
    setInputValue(newValue);
  };

  return (
    <div>
      <Child value={inputValue} update={updateInputValue} />
      <p>父组件同步值：{inputValue}</p>
    </div>
  );
}

2. 检查子组件是否正确接收并调用props #

子组件里要确保调用的是this.props.update（类组件）或者props.update（函数组件），别拼写错函数名。

子组件正确示例（类组件）： #

class Child extends React.Component {
  handleInputChange = (e) => {
    // 调用父组件传过来的update函数，把输入框的新值传回去
    this.props.update(e.target.value);
  };

  render() {
    // 父组件传过来的value作为输入框的受控值
    return <input value={this.props.value} onChange={this.handleInputChange} />;
  }
}

子组件正确示例（函数组件）： #

function Child(props) {
  const handleInputChange = (e) => {
    props.update(e.target.value);
  };

  return <input value={props.value} onChange={handleInputChange} />;
}

3. 排查其他容易踩坑的点 #

• 类组件中函数的this绑定问题：如果父组件里的更新函数不是箭头函数，一定要在constructor里绑定this，否则函数里的this会指向错误，导致函数无法被正确传递：

  class Parent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { inputValue: '' };
      // 必须绑定this，否则handleUpdate里的this不是组件实例
      this.updateInputValue = this.updateInputValue.bind(this);
    }
  
    updateInputValue(newValue) {
      this.setState({ inputValue: newValue });
    }
  
    // ...render部分
  }
  

• 条件渲染导致props缺失：如果父组件是在某些条件下才渲染子组件，要确保所有渲染分支都传递了update函数，不要出现某个分支漏传的情况。

按照上面的步骤检查调整后，父子组件的双向绑定应该就能正常工作了：父组件更新state时，子组件的输入框会同步；子组件输入值变化时，父组件的state也会同步更新。

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