useContext 返回未定义的值

Question

面对这个我的上下文返回未定义值的问题，它返回的只是初始状态。在事务列表中，我试图调用我定义的函数 deleteTransaction，但它给出的错误是它未定义。如果我遗漏了什么或需要添加什么，请告诉我。

这些是我的依赖，以防万一。

"dependencies": {
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
},

GlobalState.js：

import React, { createContext, useReducer } from 'react'
import AppReducer from './AppReducer'

const initialState = {
transactions: [
    {id:1, text:"Flower", amount:-20},
    {id:2, text:"Salary", amount:300},
    {id:3, text:"Book", amount:-10},
    {id:4, text:"Camera", amount:150}
]
}

export const GlobalContext = createContext(initialState)

export const GlobalProvider = (props) => {
const [state, dispatch] = useReducer(AppReducer, initialState)

const deleteTransaction = (id) => {
    dispatch({type:'DELETE_TRANSACTION', payload:id})
}

return (<GlobalContext.Provider value={{transactions:state.transactions, deleteTransaction}}>
    {props.children}
</GlobalContext.Provider>)
}

AppReducer.js：

export default (state, action) => {
switch(action.type) {
    case 'DELETE_TRANSACTION':
        return {
            ...state,
            transactions: state.transactions.filter(transaction => transaction.id !== action.payload)
        }
    default:
        return state
}
}

TransactionList.js：

import React, { useContext } from 'react'
import { GlobalContext } from '../context/GlobalState'
import { Transaction } from './Transaction'

export const TransactionList = () => {

const { transactions } = useContext(GlobalContext)

return (
    <>
        <h3>History</h3>
        <ul className="list">
            {transactions.map(transaction => (
                <Transaction key={transaction.id} {...transaction} />
            ))}
        </ul>
    </>
)
}

Transaction.js：

import React, { useContext } from 'react'
import { GlobalContext } from '../context/GlobalState'

export const Transaction = ({id, text, amount}) => {

const {deleteTransaction} = useContext(GlobalContext)

const sign = amount < 0 ? "-" : "+"

return (
    <div>
        <li className={amount < 0 ? "minus" : "plus"}>
            {text} <span>{sign}${Math.abs(amount)}</span><button onClick={() => 
deleteTransaction(id)} className="delete-btn">x</button>
        </li>
    </div>
)
}

Answer 1

问题

您的默认上下文值缺少deleteTransaction 函数。

const initialState = {
  transactions: [
    {id:1, text:"Flower", amount:-20},
    {id:2, text:"Salary", amount:300},
    {id:3, text:"Book", amount:-10},
    {id:4, text:"Camera", amount:150}
  ]
}

export const GlobalContext = createContext(initialState)

解决方案

定义上下文的默认值形状以匹配组件使用的内容，并确保 Transaction 在 React 树中的上方有一个 GlobalContext.Provider。

const defaultValue = {
  transactions: [],
  deleteTransaction: () => {}, // <-- add a deleteTransaction function
}

export const GlobalContext = createContext(defaultValue);

Updating Context from a Nested Component

经常需要从一个组件更新上下文 嵌套在组件树深处的某个地方。在这种情况下，您可以 通过上下文向下传递函数以允许消费者更新 上下文。

theme-context.js

// Make sure the shape of the default value passed to
// createContext matches the shape that the consumers expect!
export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});