REACT + REDUX：在REDX狀態變化mapStateToProps更新狀態，但視圖不按照新狀態呈現

有我的容器，通過REDX存儲獲取狀態。REACT + REDUX：在REDX狀態變化mapStateToProps更新狀態，但視圖不按照新狀態呈現

我傳遞這種狀態通過這樣的道具模式對話框：例子：

render(){ 
    let {team,id} =this.props.data; 
    return(
    <div> 
    <ModalExample isOpen={this.state.isOpen} team={team} id={id} 
modalClose={this.modalClose.bind(this)} 
handleAddTeam={this.handleAddTeam.bind(this)}/> 
     </div> 
     )}

首次完美的工作...... 有團隊名單，並輸入字段內模態添加按鈕box.so，當我做內Modalbox組件某些加載方法和更新的狀態，在那裏，我可以看到reduxDevTool狀態變化，甚至狀態是mapStateToProps但模態對話框隊名單變化不更新Ø [R說modalbox道具犯規收到新道具按照狀態變化......

即使在這個容器

render(){ 
    let {team,id} =this.props.data; 
    console.log(this.props.data) **//Here state change is shown** 
    console.log(team) **//Here state is not changed** 
    return(
    <div> 
    <ModalExample isOpen={this.state.isOpen} team={team} id={id} 
modalClose={this.modalClose.bind(this)} 
handleAddTeam={this.handleAddTeam.bind(this)}/> 
     </div> 
     )}

再加上我已經試過同時通過這種方式通過內部ModalExample道具

team={this.props.data} , team={team}

但仍模態示例視圖不更新..

困惑：如果我關閉並打開ModalBox或在模態框的輸入字段中鍵入內容，則根據我們的新狀態在視圖中進行更改... 但是，我希望即時模式框視圖呈現按照我們的還原狀態更改...

來源

2017-04-25 Bijay Rai

您可以嘗試通過使用componentWillReceiveProps方法來處理ModalExample組件中更改的道具，或者您可以顯示ModalExample的某些代碼。 –

當我通過ModalExample更新了redux存儲狀態時，更改的狀態顯然顯示在reduxDevtool和mapStateToProps中，甚至是console.log（this.props.data）顯示更改，但問題在於它沒有在打開的modalbox（modalExample）中傳遞道具或者說它沒有渲染組件... –

在Redux中，狀態變化發生在某些動作和減速器上。

你可以在這裏找到他們的文件Actions和Reducers。

您正在從商店提取團隊。如果您只是更新團隊對象，它不會觸發任何狀態更改。它只會改變對象。要改變狀態，你需要一些行動，將攜帶一些有效載荷。

例如，「UPDATE_TEAM_NAME」操作將攜帶newName，因爲它的有效內容和reducer（純函數）將返回一個新的團隊對象。除此之外，如果您不更新容器中的團隊對象，我建議您在ModelExample組件中獲取團隊對象，而不是將其作爲容器中的道具傳遞。它會讓事情更清楚。

來源

2017-04-25 05:51:44

是的，我更新狀態團隊裏面mapDispatchToProps使用redux行動和redurs .. dispactching代碼邏輯是在this.handleAddTeam.bind（這），我傳遞給modalbox這是甚至更新團隊裏面的REDX ..問題只是新的更新狀態並不是立即通過道具和渲染視圖的modalbox。 –

你能展示減速器的邏輯嗎？ –

case PUSH_ADDED_TEAM： \t \t \t const newTeTeStState = {... state}; \t \t \t newTeamState.data ['team'] = action.payload; \t \t \t return newTeamState; –

我不確定這是不是最好的方法..但最近我解決了我這樣的問題...

其實我的終極版商店狀態是像這樣：

user: { 
    data: [ 
     id: 1, 
     key: 'exampleKey', 
     name: 'exampleName', 
     team: [ 
      {email: 'one', role: 'one'}, 
      {email: 'two', role: 'two'} 
     ] 
    ], 
    error: null 
}

所以，每當我更新Redux的商店球隊狀態陣列狀

user: { 
    data: [ 
     id: 1, 
     key: 'exampleKey', 
     name: 'exampleName', 
     team: [ 
      {email: 'one', role: 'one'}, 
      {email: 'two', role: 'two'}, 
      {email: 'three', role: 'three'} 
     ] 
    ], 
    error:null 
}

改變Redux的狀態可以很容易地在reduxDevTool

看到

and in container mapStateToProps我正在處理st吃了這個樣子，

其中console.log(state.signup.user.data)甚至顯示狀態的變化，但這個亙古不變的調用componentWillReceiveProps所以，我的觀點是不渲染...

const mapStateToProps = (state) => { 
    return { 
     user: state.signup.user.data, 
    }; 
};

我終於在mapStateToProps定義有一個國家解決了這個問題

const mapStateToProps = (state) => { 
    return { 
     user: state.signup.user.data, 
     teamMember:state.signup.user.data.team, 
    }; 
};

此觸發器的componentWillReceiveProps瞬間呈現我的看法..

來源

2017-04-25 07:24:39

REACT + REDUX：在REDX狀態變化mapStateToProps更新狀態，但視圖不按照新狀態呈現

回答

相關問題