Question

我有以下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字符串{}，它正确返回“loading names table ...”div。但是，数据会在半秒后打印在控制台中，但它永远不会从if语句中移出并填充表格。

如果我将nameTable var更改为包含“手动”数据，那么它是有效的，所以它必须是渲染服务器端数据延迟半秒的东西。

我怎样才能更改上面的类来延迟渲染，比如1秒，然后填充表格？在我怀疑的情况下它会起作用。

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

Answer 1

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

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

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

因此，仔细看看你对AJAX异步内容的处理，导致你的问题就在那里。

React：延迟呈现JSON数据？

1 个答案: