确保在渲染子组件之前在父组件中加载数据答案

【问题标题】：Ensure loading data in parent component before it renders child component确保在渲染子组件之前在父组件中加载数据
【发布时间】：2018-08-06 15:21:13
【问题描述】：

我有连接到Redux's store 的父组件，因为我在其constructor 中调用操作并加载translation（翻译也保存在存储中）。然后，我渲染子组件并将translationn 作为道具传递给它。有时，render 方法会在获取数据之前渲染子组件。实际上，我在这条线上遇到了错误 (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);

【问题讨论】：

你能检查我的答案吗？如果您有任何问题，请随时提问。
我当然查过了，非常感谢。这很有用，但我做了一点不同的事情。我有条件地设置了translation变量，如果props.translation存在，就设置变量，否则设置为空对象。
是的！有几种可能的方法来做到这一点。也许安全的方法是使渲染短路。

标签： reactjs parameter-passing parent-child loading

【解决方案1】：

如果没有props.translation，你可以短路你的渲染方法：

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>
    );
}

还有React suggests 在componentDidMount 中进行外部API 调用，而不是构造函数。

【讨论】：