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

您需要使用componentlifecycle方法componentWillReceiveProps来监听状态更改，如果存在道具更改，则调用setstate。

例如

this.state ={
    language: 'defaultlanguage'
}

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