当提供者组件父级状态更改时，为什么不能更新子组件中的值(带有react上下文)？
当提供者组件父级状态更改时，为什么不能更新子组件中的值(带有react上下文)？
提问于 2019-04-02 22:53:09
我试图在我的项目中使用。我实现了一个提供程序组件，并且在两个子组件中使用数据。但是，当我从其中一个子组件更新提供程序组件的状态时，另一个子组件不会使用提供程序组件的数据重新呈现。
我使用这些特性的反应上下文，以避免道具从组件传递到组件。就像我过去所做的那样
//父提供程序
const {Provider, Consumer} = React.createContext()
class ShoppingCartProvider extends React.Component{
constructor(props){
super(props)
this.state = {
order: {},
Total: 0,
}
}
addOrder = (key) => {
const order = this.state.order
let totalOrder = this.state.Total
order[key] = order[key] + 1 || 1
this.setState({order})
totalOrder = totalOrder + 1
this.setState({Total: totalOrder})
}
render(){
return(
<Provider value={{
order: this.state.order,
addOrder: this.addOrder,
totalOrder: this.state.Total
}}>
<div>{this.props.children}</div>
</Provider>
)
}
}
export {ShoppingCartProvider, Consumer as ShoppingCartConsumer}更改父状态的//子
import React, {useContext } from 'react';
const ItemProducto = props =>{
const {product} = props
const {addOrder} = useContext(ShoppingCartConsumer)
return <Grid item>
<div css={botonAdd}
onClick={()=>{
addOrder(product._id)
}}>Add</div>
</Grid>
}
export default ItemProducto//当父组件中的状态发生更改时，不会重新呈现这一点。
import React, {useContext, useEffect, useState} from 'react';
const Header = props =>{
const {totalOrder} = useContext(ShoppingCartConsumer)
const [count, setcount] = useState(totalOrder)
useEffect(()=>{
setcount(totalOrder)
})
return (
<div>
<Grid item css={numeroDinero}>{count}</Grid>
</div>
)
}
export default Header当ItemProducto子节点更改了一个Total属性时，我希望在头子属性中重新呈现。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-03 00:42:14
您代码中的所有内容都签出了，除了一个。useContext()期望实际的上下文是一个参数，而不是消费者。在您的示例中，您通过执行以下操作传递了使用者：export {..., Consumer as ShoppingCartConsumer }。
要解决这个问题，您所需要做的就是:在ShoppingCartContext更改中：
const { Provider, Consumer } = React.createContext() to
const ShoppingCartContext = React.createContext();。
在你的render里
render() {
return (
<ShoppingCartContext.Provider
value={{
order: this.state.order,
addOrder: this.addOrder,
totalOrder: this.state.Total
}}
>
<div>{this.props.children}</div>
</ShoppingCartContext.Provider>
);
}然后将导出更改为：export { ShoppingCartProvider, ShoppingCartContext };
相应地修改Header和ItemProducto中的导入，不要忘记将ShoppingCartContext传递给各自的useContext()。
有关useContext的更多信息，请参见这里
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55484611
复制相关文章
相似问题
腾讯云开发者
