React项目TypeError报错求助：onSubmit无法读取addContact属性

我一眼就看到问题出在你使用useContext的方式上，这是React Context里很常见的小失误。

问题根源 #

在你的ContactForm.jsx里，你是这样调用useContext的：

const contactContext = useContext({ ContactContext });

你把ContactContext包装在了一个对象里传给useContext，但useContext的参数必须是Context对象本身，而不是包含它的对象。这就导致contactContext变成了undefined，所以当你在onSubmit里调用contactContext.addContact时就会抛出那个错误。

修复步骤 #

只需要把useContext的参数改成直接传入ContactContext即可：

// 错误写法
// const contactContext = useContext({ ContactContext });

// 正确写法
const contactContext = useContext(ContactContext);

额外检查（确保万无一失） #

另外还要确认你的应用组件已经被ContactState正确包裹了，比如在你的根组件（比如App.js）里应该有这样的结构：

import ContactState from './path/to/ContactState';

function App() {
  return (
    <ContactState>
      {/* 你的其他组件，包括ContactForm */}
      <ContactForm />
    </ContactState>
  );
}

如果没有这一步，即使useContext用对了，也无法获取到上下文里的内容。

修改后的完整ContactForm.jsx核心片段 #

import React, { useState, useContext } from "react";
import ContactContext from "./../../contact/contactContext";

const ContactForm = () => {
  // 这里修正了useContext的调用方式
  const contactContext = useContext(ContactContext);
  const [contact, setContact] = useState({
    name: "",
    sex: "Female",
    dateOfBirth: "",
    resTown: "",
    hometown: "",
    resAddress: "",
    stateOfOrigin: "",
    lgaOfOrigin: "",
    nationality: "",
    regDate: "",
    hospName: "",
    headDoctor: "",
    hospTown: "",
    onDuty: "",
    hospResAddress: "",
    hospState: "",
    hospLga: "",
    birthType: "",
    babyWeight: "",
  });

  // ... 其余代码保持不变
};

这样修改后，contactContext就能正确获取到你在ContactState里提供的addContact方法，报错应该就消失了。

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