尝试学习如何使用react hooks。我使用createContext,我想将状态和函数一起传输到其他组件,但我需要帮助来完成此操作。我还想问一下这样做是否有意义。
事实上,在我的例子中,我可以通过使用setState来更新状态,但是通过在上下文中定义一个函数,我认为在任何地方使用这个函数都更有意义。
我的背景是:
export const ExpenseContext = createContext();
export const ExpenseProvider = props => {
const [expense, setExpense] = useState(initialExpenses)
const clearItems = () => {
setExpense([])
}
return ( <
ExpenseContext.Provider value = {
[expense, setExpense],
clearItems
} > {
props.children
} <
/ExpenseContext.Provider>
)
}
我想使用此函数的组件:
const ExpenseList = () => {
const [expense, setExpense] = useContext(ExpenseContext);
const {
clearItem
} = useContext(ExpenseContext);
// const clearItems = () => { normally this works ı know!
// setExpense([])
// }
return ( <
>
<
List > {
expense.map((expense) => {
return <Item key = {
expense.id
}
expense = {
expense
}
/>;
})
} <
/List> <
div className = "text-center" > {
expense.length > 0 && ( <
Button onClick = {
clearItems
}
type = "danger"
shape = "round"
icon = { < DeleteOutlined / >
} >
Clear Expenses <
/Button>
)
} <
/div> < /
>
);
};
在这种情况下,可以直接在组件中使用该函数,而不必尝试传递函数。但我好奇的是如何管理函数的传递和接收。
注意:当我尝试以这种方式使用它时,我得到这个错误:第一个月
2条答案
按热度按时间kkbh8khc1#
React上下文是一种通过React节点树传递数据而无需手动传递属性的机制。使用
createContext
可为React生态系统中的数据结构创建引用,从而将给定数据结构公开给子节点。另一方面,
Context.Provider
提供了一个值给作为提供者的子节点的消费组件。有几个警告要记住--每当你的提供者的值的属性改变时,它将触发它的所有订阅者--它的后代--的重新呈现。提供者本身不是一个钩子,因此当使用钩子生成值时,必须使用新的值集重新呈现提供程序。您的代码中有几个方面需要解决:
1.在
Context.Provider
中使用useState
,1.返回
useState
的结果作为提供程序值,以及1.作为值提供给提供程序的数据结构
Context.Provider
中使用useState
**当在react
Context
中使用useState
的结果时,您必须了解在后代中使用的含义,以及它将产生的影响。React非常擅长确定重新呈现的内容和时间,它为您提供了进一步限制该行为的控制。但是,是一个react Functional Component Hook,每次值被更新时都会触发一个新的渲染,这是有规则的,优先级和延迟,但是可以保证重新呈现任何使用useState
钩子的功能组件。在可能的情况下将上下文对象作为纯函数。useState
的结果作为提供程序值**在您的示例中,您将
useState
调用的结果原样返回给上下文提供程序,这给出了React无法正确订阅和侦听更改的对象结构。在Provider中使用state时,需要将正确的JSON返回给Provider,以便它可以订阅值更改并通知其子代
用途
取代:
您提供给上下文提供程序的对象结构无效。See example codepen.
Check out this great example on dev.to用于
useState
和Context
0yg35tkg2#
正如我在评论中所说的,你们非常接近,你们传递函数、对象和值的方式是一样的