我在使用上下文渲染组件时遇到问题。 AppProvider
类有一个名为add
的函数可以改变状态。我正在使用上下文将add
函数和状态传递给组件。每当组件上发生Onclick事件时,add
方法就会设置一个新状态。
所以我的问题是当onclick发生在状态改变的任何组件上时。那么为什么这两个组件都没有反映出变化呢?
当我在console.log(this.state)
函数内add
。组件已使用相同的状态值进行初始化,但两个组件都维护自己的状态实例。
似乎AppProvider
每次调用时都会传递一个新实例。它应该以这种方式表现吗?我怎么能使用上下文共享相同的实例不同的组件。
import React from "react";
import ReactDOM from "react-dom";
var Mycontext=React.createContext();
class AppProvider extends React.Component {
constructor(props) {
super(props)
this.state=({ total:12323 })
}
add(){
var x=this.state.total
x++;
this.setState({total:x})
}
render() {
return (
<div>
<Mycontext.Provider
value = {{add:this.add.bind(this),state:this.state.total}}>
{this.props.children}
</Mycontext.Provider>
</div>
)
}
}
var ContextConsumer = Mycontext.Consumer;
var Para2=(props) => {
console.log(props)
return (<p onClick={()=>props.add()}>{props.data}</p>)
}
var Para1=(props) => {
return (<p onClick={()=>props.add()}>{props.data}</p>)
}
var App=(props) => {
return (
<div>
<AppProvider>
<ContextConsumer>
{({state,add}) => <Para1 data={state} add={add}/>}
</ContextConsumer>
</AppProvider>
<AppProvider>
<ContextConsumer>
{({state,add}) => <Para1 data={state} add={add} />
</ContextConsumer>
</AppProvider>
</div>
)
}
ReactDOM.render(<App/>,document.getElementById("index"));
@CameronDowner假设组件嵌套在div中并且不是使用AppProvider
just的直接兄弟,一旦在这种情况下不起作用就行不通。
当组件不是直接兄弟时,如何传递单个AppProvider
实例。那可能吗?
<div class="container">
<div class="row">
<AppProvider>
<div class="col m6 s6 l6">
<ContextConsumer>
{({ state, add }) =>
<Para1 data={state} add={add}/>}
</ContextConsumer>
</div>
<div class="col m6 s6 l6">
<ContextConsumer>
{({ state, add }) =>
<Para2 data={state} add={add} /> }
</ContextConsumer>
</div>
</AppProvider>
</div>
</div>
正如@Dave Newton的评论中提到的,您的代码很难理解并且实际上包含一些语法错误。当问题有干净的代码时,总是更容易提供帮助。
我设法发现了这个问题。这是因为你有两个<AppProvider />
组件。
<AppProvider>
<ContextConsumer>
{({ state, add }) => <Para1 data={state} add={add} />}
</ContextConsumer>
</AppProvider>
<AppProvider>
<ContextConsumer>
{({ state, add }) => <Para2 data={state} add={add} /> }
</ContextConsumer>
</AppProvider>
这意味着有两种状态,它们分别传递给每个组件。
如果你用一个替换它,就像这样,你的组件将共享一个状态,因此两者都更新。
<AppProvider>
<ContextConsumer>
{({ state, add }) => <Para1 data={state} add={add} />}
</ContextConsumer>
<MyContext.Consumer>
{({ state, add }) => <Para2 data={state} add={add} /> }
</ContextConsumer>
</AppProvider>