类型错误： 无法读取未定义的属性"添加联系人" onSubmit

Question

我正在做一个React项目，目前我在这里存储了这个错误，即使我的所有代码似乎都很正常。我真的不明白为什么我会犯这个错误。我在谷歌和这里都查过了。类似问题的答案没有真的解决了我的挑战，所以我来这里问，也许有人能弄清楚我到底在哪里错过了什么。谢谢各位

错误：

TypeError:无法读取未定义的属性"addContact"on提交

52 | 
53 |  const onSubmit = (e) => {
54 |    e.preventDefault();
> 55 |    contactContext.addContact(contact);
56 |    setContact({
57 |      name: "",
58 |      sex: "Female",

我的代码如下：

ContactForm.jsx:

import React, { useState, useContext } from "react";
import ContactContext from "./../../contact/contactContext";
const ContactForm = () => {
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: "",
});
const {
name,
sex,
dateOfBirth,
resTown,
hometown,
resAddress,
stateOfOrigin,
lgaOfOrigin,
nationality,
regDate,
hospName,
headDoctor,
hospTown,
onDuty,
hospResAddress,
hospState,
hospLga,
birthType,
babyWeight,
} = contact;
const onChange = (e) =>
setContact({ ...contact, [e.target.name]: e.target.value });
const onSubmit = (e) => {
e.preventDefault();
contactContext.addContact(contact);
setContact({
name: "",
sex: "Female",
dateOfBirth: "",
resTown: "",
hometown: "",
resAddress: "",
stateOfOrigin: "",
lgaOfOrigin: "",
nationality: "",
regDate: "",
hospName: "",
headDoctor: "",
hospTown: "",
onDuty: "",
hospResAddress: "",
hospState: "",
hospLga: "",
birthType: "",
babyWeight: "",
});
};

联系人Reducer.jsx

import {
GET_CONTACTS,
ADD_CONTACT,
DELETE_CONTACT,
SET_CURRENT,
CLEAR_CURRENT,
UPDATE_CONTACT,
FILTER_CONTACTS,
CLEAR_CONTACTS,
CLEAR_FILTER,
CONTACT_ERROR,
} from "../types";
export default (state, action) => {
switch (action.type) {
case ADD_CONTACT:
return {
...state,
contacts: [...state.contacts, action.payload],
};
default:
return state;
}
};

ContactState.jsx

import React, { useReducer } from "react";
import { v4 as uuid } from "uuid";
import ContactContext from "./contactContext";
import contactReducer from "./contactReducer";
import {
GET_CONTACTS,
ADD_CONTACT,
DELETE_CONTACT,
SET_CURRENT,
CLEAR_CURRENT,
UPDATE_CONTACT,
FILTER_CONTACTS,
CLEAR_CONTACTS,
CLEAR_FILTER,
CONTACT_ERROR,
} from "../types";
const ContactState = (props) => {
const initialState = {
contacts: [
{
id: 1,
name: "John Doe",
hospName: "someText",
dateOfBirth: "sameDate",
sex: "someText",
resTown: "someText",
hometown: "someText",
resAddress: "someText",
stateOfOrigin: "someText",
lgaOfOrigin: "someText",
nationality: "someText",
regDate: "someDate",
headDoctor: "someText",
hospTown: "someText",
onDuty: "someText",
hospResAddress: "someText",
hospState: "someText",
hospLga: "someText",
birthType: "someText",
babyWeight: "someFigure",
},
{
id: 2,
name: "Sara Mathew",
hospName: "someText",
dateOfBirth: "sameDate",
sex: "someText",
resTown: "someText",
hometown: "someText",
resAddress: "someText",
stateOfOrigin: "someText",
lgaOfOrigin: "someText",
nationality: "someText",
regDate: "someDate",
headDoctor: "someText",
hospTown: "someText",
onDuty: "someText",
hospResAddress: "someText",
hospState: "someText",
hospLga: "someText",
birthType: "someText",
babyWeight: "someFigure",
},

],
};
const [state, dispatch] = useReducer(contactReducer, initialState);
// Add Contact
const addContact = (contact) => {
contact.id = uuid.v4();
dispatch({ type: ADD_CONTACT, payload: contact });
};
// Delete Contact
// Set Current Contact
// Clear Current Contact
// Update Contact
return (
<ContactContext.Provider
value={{
contacts: state.contacts,
addContact,
}}
>
{props.children}
</ContactContext.Provider>
);
};
export default ContactState;

Answer 1

如果您阅读useContext定义：

Don’t forget that the argument to useContext must be the context object itself:
Correct: useContext(MyContext)
Incorrect: useContext(MyContext.Consumer)
Incorrect: useContext(MyContext.Provider)

所以在你的情况下应该是这样的：

const contactContext = useContext(ContactContext );

删除useContext中的{}