面对这个问题,我的上下文返回未定义的值,它返回的只是初始状态。在事务列表中,我试图调用我定义的函数 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>
)
}
答案 0 :(得分:0)
您的默认上下文值缺少 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: () => {},
});