我在控制台中收到此錯誤：無法讀取未定義的屬性“ some”

Question

TypeError：無法讀取未定義的``屬性''我不知道為什么ı在我檢查下面所有代碼的時候都會出現此錯誤:(試圖了解反應的方式:)那么這的目的是什么我在contextprovider上包裝的屬性，例如聯系人加載和我需要的功能

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

export default function ContactForm() {
  const name = useFormInput('')
  const email = useFormInput('')

  const contactContext = useContext(ContactContext)
  const { addContact } = contactContext

  const onSubmit = () => {
    addContact(name.value, email.value)
    name.onReset()
    email.onReset()
  }
  return (
   SOME HTML CODE HERE
  )
}

//contactState.js
import React, { useReducer } from 'react'
import _ from 'lodash'
import ContactContext from './contactContext'
import ContactReducer from './contactReducer'

const ContactState = props => {
  const initialState = {
    contacts: [
      {
        id: '098',
        name: 'Diana Prince',
        email: 'diana@us.army.mil'
      }
    ],
    loading: false,
    error: null
  }

  const [state, dispatch] = useReducer(ContactReducer, initialState)
  const [contacts, loading] = state
  const addContact = (name, email) => {
    dispatch({
      type: 'ADD_CONTACT',
      payload: { id: _.uniqueId(10), name, email }
    })
  }
  const delContact = id => {
    dispatch({
      type: 'DEL_CONTACT',
      payload: id
    })
  }
  return (
    <ContactContext.Provider
      value={{
        contacts,
        loading,
        addContact,
        delContact
      }}
    >
      {props.children}
    </ContactContext.Provider>
  )
}
export default ContactState

//contactReducer.js
export default (state, action) => {
  switch (action.type) {
    case 'ADD_CONTACT':
      return {
        contacts: [...state, action.payload]
      }
    case 'DEL_CONTACT':
      return {
        contacts: state.contacts.filter(
          contact => contact.id !== action.payload
        )
      }
    case 'START':
      return {
        loading: true
      }
    case 'COMPLETE':
      return {
        loading: false
      }
    default:
      throw new Error()
  }
}

//contactContext.js
import { createContext } from 'react'
const contactContext = createContext()
export default contactContext

Answer 1

在減速器中，添加聯系人時，您散布了錯誤的狀態鍵。 這應該解決它：

case 'ADD_CONTACT':
  return {
    contacts: [...state.contacts, action.payload]
  }

Answer 2

我看不到您在應用程序中使用ContactState的位置。 如果您不使用它並使用它呈現ContactForm組件，那么您將無法獲得任何上下文值。 您應該將其呈現為：

<ContactState>
  <ContactForm />
</ContactState>

在您應用的合適位置。 另外，您無法像這樣獲得contacts和loading ：

const [ contacts, loading ] = state;

state不是數組，而是這里的對象。 您應該使用：

const { contacts, loading } = state

您可以在下面找到代碼的簡化版本。 我刪除/更改了一些零件以便盡可能地運行它。 您應該像@Asaf David在他們的答案中提到的那樣來修復減速器，但這不是這里的主要問題。 解決上下文問題后，您可以嘗試修復減速器。

關於您的問題，如果您通過查看本示例來了解React的工作方式，那么您很容易感到困惑。 因為Context是一個高級概念（至少對於初學者而言）。 此外，代碼將useReducer與Context useReducer使用，這使事情變得更加復雜。 如果您打算了解React本身，那么請從入門指南開始。

通過使用上下文，我們可以將數據自上而下傳遞到最深層的組件。 但是，為了使用該數據，應將那些組件呈現為上下文提供者的子級。

在您的代碼中，您正在ContactState中執行此操作，但從未使用過它。 另外，在該組件中，您正在使用useReducer定義狀態，並通過value將狀態提供給上下文。

最后，在ContactForm組件中，您正在使用useContext掛鈎來獲取上下文數據。 在當前代碼中，由於未在提供程序中呈現此組件，因此contactContext是未定義的，並且會出現錯誤。 您無法通過未定義獲取addContact 。

在我的示例中，我正在檢索contacts以顯示某些內容。 同樣，我已經從您的代碼中更改/刪除了某些部分。

 const { createContext, useContext, useReducer } = React; const ContactContext = createContext(); function ContactForm() { // Changed those values const name = ""; const email = ""; const contactContext = useContext(ContactContext); // changed addContact -> contacts const { contacts } = contactContext; const onSubmit = () => { addContact(name.value, email.value); name.onReset(); email.onReset(); }; // added some data to render return <div>{contacts[0].name}</div>; } function ContactReducer(state, action) { switch (action.type) { case "ADD_CONTACT": return { contacts: [...state, action.payload] }; case "DEL_CONTACT": return { contacts: state.contacts.filter( contact => contact.id !== action.payload ) }; case "START": return { loading: true }; case "COMPLETE": return { loading: false }; default: throw new Error(); } } const ContactState = props => { const initialState = { contacts: [ { id: "098", name: "Diana Prince", email: "diana@us.army.mil" } ], loading: false, error: null }; const [state, dispatch] = useReducer(ContactReducer, initialState); const { contacts, loading } = state; const addContact = (name, email) => { dispatch({ type: "ADD_CONTACT", // removed lodash part, added a static id payload: { id: 1, name, email } }); }; const delContact = id => { dispatch({ type: "DEL_CONTACT", payload: id }); }; return ( <ContactContext.Provider value={{ contacts, loading, addContact, delContact }} > {props.children} </ContactContext.Provider> ); }; // added the relevant render part ReactDOM.render( <ContactState> <ContactForm /> </ContactState>, document.getElementById("root") ); 

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root" />