Index.jsx 不会在状态更改时重新呈现

Question

我使用 react-translated 作为我的 React 应用程序的翻译提供者，index.jsx render 方法是：

ReactDOM.render(
    <TranslationProvider language={store.getState().language} translation={translation}>
        <MuiThemeProvider theme={theme}>
            <Provider store={store}>
                <Routes/>
            </ Provider>
        </MuiThemeProvider>
    </TranslationProvider>,
    document.getElementById('root')
);

然后，我通过调度操作更新全局状态的语言...它可以工作（语言更改）但是这个 render 不会再次调用，并且我的应用程序中的文本不会切换到其他语言。它不应该在state 更改store 时重新渲染吗？

Answer 1

需要使用组件生命周期方法componentWillReceiveProps来监听状态变化，如果有props变化，则调用setstate。

例如

this.state ={
    language: 'defaultlanguage'
}

componentWillReceiveProps(nextProps){
    if(nextProps.language !== this.state.props){
       this.setState({
           language: nextProps.language
       }) 
    }
}