Question

我有一个与Redux's store连接的父组件，因为我在其constructor中调用action并加载translation（翻译也保存在商店中）。然后，我渲染子组件并将translationn作为道具传递给它。有时会发生render方法在获取数据之前渲染Child组件的情况。实际上，我在这一行（props.translation is undefined, unexpected token in JSON.parse()....）上出错：

let translation = JSON.parse(this.props.translation);

如何延迟渲染方法，直到获取翻译数据？这是父组件代码：

class ConnectedTranslationProvider extends Component {
    constructor(props) {
        super(props);
        if(!props.translation){
        props.translationsActions.loadTranslation(this.props.language);
        }
    }

    render() {
        let translation = JSON.parse(this.props.translation);
        let language = this.props.language;

        return (
            <TranslationProvider translation={translation} language={language}>
                {this.props.children}
            </TranslationProvider>
        );
    }
}

function mapStateToProps(state) {
    return {
        language: state.language, 
        translation: state.translation
    }
}


function mapDispatchToProps(dispatch) {
    return {
        translationsActions: bindActionCreators(translationsActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ConnectedTranslationProvider);

Answer 1

如果没有render() { // You can show a message here or a Loading component if (!this.props.translation) return </div> let translation = JSON.parse(this.props.translation); let language = this.props.language; return ( <TranslationProvider translation={translation} language={language}> {this.props.children} </TranslationProvider> ); }，则可以短路渲染方法：

componentDidMount

也React suggests而不是构造函数在myTable中进行外部API调用。

确保在呈现子组件之前将数据加载到父组件中

1 个答案: