React：延迟呈现 JSON 数据？答案

【问题标题】：React: Delay rendering of JSON data?React：延迟呈现 JSON 数据？
【发布时间】：2017-01-12 10:08:19
【问题描述】：

我有以下 React 类。首先，控制台会打印一个空数组 {}，它会返回空的 div。但是，半秒后控制台将打印正确的值 - 但空的 div 仍然存在。我应该如何更改类以正确加载 JSON？

var TableData = React.createClass({

    render: function() {
        console.info(JSON.stringify(this.props.summary));

        if (!this.props.data || !this.props.summary) {
            return <div>Loading name table..</div>
        }

        var summary = this.props.table;

        var nameTable =  summary.nameTable;
        var nameTableArr = Object.values(nameTable);
        return ( // A table is returned here, works with the same data structure as is present in the JSON

如果我转到控制台，console.info 最初会打印一个空 JSON 字符串 {}，它会正确返回“正在加载名称表...”div。然而，数据在半秒后打印在控制台中，但它永远不会离开 if 语句并填充表格。

如果我将nameTable var 更改为包含“手动”数据，它会起作用，因此它必须与渲染延迟半秒的服务器端数据有关。

如何更改上述类以延迟渲染，例如 1 秒，然后填充表格？在我怀疑的那种情况下它会起作用。

删除 if 语句会在控制台中生成 Uncaught TypeError: Cannot convert undefined or null to object，这是有道理的，因为字符串确实有半秒钟是空的。

【问题讨论】：

标签： javascript arrays json reactjs

【解决方案1】：

我不是一个 React 经验丰富的人，但这看起来你有异步行为的问题。

为了对你有更多帮助，我需要调用ajax的那部分代码。

在我看来，整个问题是你的代码在没有结果时首先触发，加载数据后它不会再次触发。

因此，请仔细查看您对 AJAX 异步内容的处理，因为您的问题就在那里。

【讨论】：