React子组件调用父组件方法报onQuantityChanged不是函数如何解决

核心错误原因 #

你遇到的报错直接由父组件传递props时的方法名大小写拼写错误导致：
你在父组件给QuantityPicker传props时写的是onQuantityChanged={this.OnQuantityChanged}，这里方法名首字母大写为O，但你实际定义的方法名是onQuantityChanged（首字母小写），相当于传递给子组件的onQuantityChanged prop值为undefined，子组件调用时就会抛出「不是函数」的报错。

同时你的代码还有两处会导致运行异常的问题：

• 父组件render方法返回了多个同级JSX元素，没有用根节点包裹，React不支持这类写法
• 子组件的setState是异步操作，调用后立刻读取this.state.quantity拿到的是更新前的旧值，传递给父组件的数值不符合预期

修复后父组件代码 #

import React, { Component } from "react";
import QuantityPicker from "./quantityPicker";

class Product extends Component {
  state = {
    quantity: 1,
  };

  render() {
    return (
      <>
       <label>Price Each: $500</label>
       <br/>
       <label>Total Price: ${500 * this.state.quantity}</label>
       <br/>
       <QuantityPicker onQuantityChanged={this.onQuantityChanged}></QuantityPicker>
      </>
    );
  }

  onQuantityChanged = (newQuantity) => {
    this.setState({ quantity: newQuantity });
  };
}
export default Product;

修复后子组件代码 #

import React, { Component } from "react";

class QuantityPicker extends Component {
  state = {
    quantity: 1,
  };

  render() {
    return (<button onClick={this.increaseQuantity}>+</button>);
  }

  increaseQuantity = () => {
    const newQuantity = this.state.quantity + 1
    this.setState({ quantity: newQuantity });
    // 直接传递计算好的新值，规避setState异步问题
    this.props.onQuantityChanged(newQuantity);
  };
}
export default QuantityPicker;

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