React上下文組件渲染

Question

我在使用上下文渲染組件時遇到問題。 AppProvider類具有一個名為add的函數，該函數AppProvider狀態。 我正在使用上下文將add函數和狀態傳遞給組件。 每當組件上發生Onclick事件時， add方法都會設置一個新狀態。

所以我的問題是，當兩個組件中的任何一個發生onclick時，狀態都會改變。 那么，為什么更改沒有同時反映在兩個組件上？

當我在add函數內console.log(this.state) 。 組件已使用相同的狀態值初始化，但是兩個組件都維護自己的狀態實例。

似乎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直接同級AppProvider ，在這種情況下將不起作用。

當組件不是直接同級時，如何傳遞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> 

Answer 1

如@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>