React报错TypeError: props.globalChange is not a function如何解决

问题原因 #

• 父子组件传递的props命名不一致：父组件给LiftingChild传递的回调函数命名是onChange，但子组件内尝试调用的是props.globalChange，该属性在子组件的props中不存在，因此抛出不是函数的报错。
• 额外隐含问题：useState初始值为数字类型0，但globalChange里调用setData时传入的是对象{data: items}，会导致后续input的value属性值类型错误，出现非受控组件转受控组件的运行警告。

解决步骤 #

1. 统一父子组件的回调函数命名，这里保持父组件传递的onChange命名不变，修改子组件内调用的属性名即可。
2. 修正setData的传值逻辑，和初始值类型保持一致，直接传入更新后的值即可，无需额外包裹对象。

修正后完整代码 #

import React, { useState } from 'react';

export default function Lifting() {
    const [data, setData] = useState(0);
    function globalChange(items) {
        // 修正setData传值，和初始值类型匹配
        setData(items);
    }
    return (
        <div>
            <h1>Lifting State Up</h1>
            <LiftingChild val={data} onChange={globalChange} />
            <br />
            <LiftingChild val={data} onChange={globalChange} />
        </div>
    )
}

function LiftingChild(props) {
    return (
        <div>
            {/* 修正调用的props属性名，和父组件传递的onChange对应 */}
            <input value={props.val} onChange={(e) => { props.onChange(e.target.value) }} />
        </div>
    )
}

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