React报错TypeError: handleChange is not a function排查

你判断错误位置的思路不对：handleSubmit里的日志没打印，不是因为错误出现在两个console.log语句之间。报错触发时机是你在输入框打字的瞬间，由输入框的onChange回调抛出，这时候你还没点击Confirm按钮，handleSubmit根本没执行，里面的日志自然不会输出。

核心bug出在Context的调用语法上，你写的这行代码完全不符合useContext的调用规则：

const {formData, handleChange, sendTransaction} = 
useContext; {TransactionContext}

这段代码的实际执行逻辑是：

1. 把useContext这个hook本身当成值，解构赋值给formData/handleChange/sendTransaction三个变量，这三个变量实际全是undefined
2. 后面的{TransactionContext}是一个独立的空代码块，根本没有作为参数传入useContext，等于你完全没从Context里读取任何值。

这种情况下你在onChange里调用handleChange，实际就是在调用undefined()，自然会抛出「handleChange is not a function」的错误。
另外你贴的代码片段最开头多了一个多余的}，运行时也会触发语法错误，记得一并删除。

把错误的Context调用代码替换为正确写法即可：

const { formData, handleChange, sendTransaction } = useContext(TransactionContext);

改完后就能正常从TransactionContext中读取到对应的状态和方法，输入、提交逻辑都能正常运行。

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