Question

我更新了商店，它登录了我的控制台，但组件的内容没有变化。我在渲染函数中渲染了问题这是我的减速机。我更新问题[0]但没有任何改变。

function VideoData(state=data, action){
switch(action.type){
    case SHOW_QUESTION:
        let newstate = state;
        newstate.currentQuestion = action.item.currentQuestion;
        newstate.currentTime = action.item.currentTime;
        newstate.question[0] = {Q:"laksndlaksnd"};
        return newstate;
    default:
        return state;
}
}
const rootReducer = combineReducers({VideoData});

export default rootReducer;

渲染功能

render(){
    return(
        <div className="Learning">
            <div className="CategoryMenu">
                <ContentList/>
            </div>
            <div className="ActivitiesContent">
                <div id="video_wraper">
                  <YouTube
                videoId={this.props.VideoData.video}
                opts={opts}
                onPlay = {this.handlePlay.bind(this)}
              />
                </div>
                <div className="Q&Aarea">
                    <div className="">{this.props.VideoData.question[0].Q}</div>

//I log data of store here but nothing change when i update Store 

                    <ABCDQUestion data={this.props.VideoData.question[0]} continue={this.handlePlay.bind(this)}/>
                </div>
            </div>
        </div>
    )       
}
}

function mapStateToProps(state){
    return {VideoData:state.VideoData}
}
function mapDispatchToProps(dispatch){
    return bindActionCreators({ShowQuestion},dispatch);
}

export default connect(mapStateToProps,mapDispatchToProps)(Learning);

Answer 1

在你的reducer中，即使你将值赋给一个新变量，它只是存储对你当前状态的引用，所以当你对这个值进行更改时，你实际上是在改变你的状态而redux并没有注意到你真的改变了它，因为它需要一个新的状态。而是这样做：

let newstate = [...state];

通过这种方式，您将创建一个包含当前状态的所有元素的新数组，这是一个新的对象，因此您的redux状态将检测到更改并将触发重新渲染。

当我更新Store时，Redux不会重新渲染

1 个答案: