Question

经过一个小时的研究，我不确定如何解决此问题，并且仔细检查代码是否与视频相同...请有人帮助。看起来上下文并没有被应用，但是，作为一个新手，我不确定问题是什么，并且希望从经验更丰富的React Developer那里获得帮助，以指导我完成我在这里显然缺少的概念。 ..或者这可能是语法错误。我现在不知道。

我的ContactForm.js

import React, { useState, useContext } from 'react'
import ContactContext from '../../context/contact/contactContext'


const ContactForm = () => {
  const contactContext = useContext(ContactContext);

  const [contact, setContact] = useState({
    name: '',
    email: '',
    phone: '',
    type: 'personal'
  });

  const { name, email, phone, type } = contact;

  const onChange = e =>
    setContact({ ...contact, [e.target.name]: e.target.value });

  const onSubmit = e => {
    e.preventDefault();
    contactContext.addContact(contact);
    setContact({
      name: '',
      email: '',
      phone: '',
      type: 'personal'  
    });
  }

  return (
      <form onSubmit={onSubmit}>
        <h2 className="text-primary">Add Contact</h2>
        <input
          type="text"
          name="name"
          placeholder="Name"
          value={name}
          onChange={onChange}
        />
        <input
          type="email"
          name="email"
          placeholder="Email"
          value={email}
          onChange={onChange}
        />
        <input
          type="text"
          name="phone"
          placeholder="Phone"
          value={phone}
          onChange={onChange}
        />
        <p>Contact Type</p>
        <input
          type="radio"
          name="type"
          value="personal"
          checked={type === "personal"}
          onChange={onChange}
        />{" "}
        Personal{" "}
        <input
          type="radio"
          name="type"
          value="professional"
          checked={type === "professional"}
          onChange={onChange}
        />{" "}
        Professional{" "}
        <div>
          <input className="btn btn-primary btn-block" type="submit" value="Add Contact"/>
        </div>
      </form>
  );
}


export default ContactForm

我的ContactState.js

import React, { useReducer } from 'react'
import uuid from 'uuid'
import ContactContext from './contactContext'
import contactReducer from './contactReducer'
import {
  ADD_CONTACT,
  DELETE_CONTACT,
  SET_CURRENT,
  CLEAR_CURRENT,
  UPDATE_CONTACT,
  FILTER_CONTACTS,
  CLEAR_FILTER
} from '../types'

const ContactState = props => {
  const initialState = {
    contacts: [
      {
        id: 1,
        name: 'Jill Johnson',
        email: 'jill@gmail.com',
        phone: '123-456-7890',
        type: 'personal'
      },
      {
        id: 2,
        name: 'Sara Watson',
        email: 'sara@gmail.com',
        phone: '456-123-7890',
        type: 'personal'
      },
      {
        id: 3,
        name: 'Harry White',
        email: 'harry@gmail.com',
        phone: '233-455-7890',
        type: 'professional'
      }
    ]
  };
  const [state, dispatch] = useReducer(contactReducer, initialState);

  //add contact
  // eslint-disable-next-line no-unused-vars
  const addContact = contact => {
    contact.id = uuid.v4();
    dispatch({ type:ADD_CONTACT, payload:contact });
  }

  //delete contact

  //set current contact

  //clear current contact

  //update contact

  //filter contacts

  //clear filter

  return (
    <ContactContext.Provider
      value={‌{
        contacts: state.contacts
      }}>
      { props.children }
    </ContactContext.Provider>
  )
};

export default ContactState;

我的contactReducer.js

import {
  ADD_CONTACT,
  DELETE_CONTACT,
  SET_CURRENT,
  CLEAR_CURRENT,
  UPDATE_CONTACT,
  FILTER_CONTACTS,
  CLEAR_FILTER
} from '../types'

export default (state, action) =>{
  switch(action.type){
    case ADD_CONTACT:
      return{
        ...state,
        contacts: [...state.contacts, action.payload] 
      };
    default:
      return state;
  }
};

预先感谢您的帮助。

TypeError：contactContext.addContact不是函数

0 个答案: