Javascript 反应+；基于渲染的AJAX组件

为了填充React组件的内容，我在componentWillMount方法的主体中使用了AJAX request，在这里我更改了this.state作为请求执行的结果。问题是render方法在请求完成之前运行，在this.state通过setState更改之后运行。此外，如果这样的组件渲染一个，也使用AJAX，那么渲染调用的数量将随着二次幂的增加而增加

如何使组件仅在获得必要的数据后才渲染

var News = React.createClass({
    getInitialState: function () {
        return {
            news: [],
            page: 1
        };
    },

    componentWillMount: function () {
        let xmlhttp = getXmlHttp();
        xmlhttp.open("POST", "server/news.php", true);
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.onreadystatechange=() => {
            if (xmlhttp.readyState != 4) return;
            clearTimeout(timeout);
            if (xmlhttp.status == 200) {
                this.setState({
                    news: eval(xmlhttp.responseText.toString())
                });
            } else {
                handleError(xmlhttp.statusText);
            }
        };
        xmlhttp.send('page=' + this.state.page);
        var timeout = setTimeout( function(){ xmlhttp.abort(); handleError("Request time over") }, 10000);
    },

    render: function () {
        let itemList = this.state.news.map(function(item, iterator){
            return (
                <NewsItem
                    niTitle={item[0]}
                    niText={item[1]}
                    niDate={item[2]}
                    niImg={item[3]}
                    key={"ni " + iterator}
                />
            );
        });
        return (
            <div>
                {itemList}
                <PageChanger page={this.state.page}/>
            </div>
        );
    }
});

var News=React.createClass({
getInitialState:函数（）{
返回{
新闻：[]，
页码：1
};
},
componentWillMount:函数（）{
设xmlhttp=getXmlHttp（）；
open（“POST”，“server/news.php”，true）；
setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）；
xmlhttp.onreadystatechange=（）=>{
如果（xmlhttp.readyState！=4）返回；
clearTimeout（超时）；
if（xmlhttp.status==200）{
这是我的国家({
新闻：eval（xmlhttp.responseText.toString（））
});
}否则{
handleError（xmlhttp.statusText）；
}
};
xmlhttp.send（'page='+this.state.page）；
var timeout=setTimeout（函数（）{xmlhttp.abort（）；handleError（“请求时间超过”）}，10000）；
},
渲染：函数（）{
让itemList=this.state.news.map（函数（项，迭代器）{
返回(
);
});
返回(
{itemList}
);
}
});

如何使组件仅在获得 必要的数据

var News = React.createClass({
    getInitialState: function () {
        return {
            news: [],
            page: 1
        };
    },

    componentWillMount: function () {
        let xmlhttp = getXmlHttp();
        xmlhttp.open("POST", "server/news.php", true);
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.onreadystatechange=() => {
            if (xmlhttp.readyState != 4) return;
            clearTimeout(timeout);
            if (xmlhttp.status == 200) {
                this.setState({
                    news: eval(xmlhttp.responseText.toString())
                });
            } else {
                handleError(xmlhttp.statusText);
            }
        };
        xmlhttp.send('page=' + this.state.page);
        var timeout = setTimeout( function(){ xmlhttp.abort(); handleError("Request time over") }, 10000);
    },

    render: function () {
        let itemList = this.state.news.map(function(item, iterator){
            return (
                <NewsItem
                    niTitle={item[0]}
                    niText={item[1]}
                    niDate={item[2]}
                    niImg={item[3]}
                    key={"ni " + iterator}
                />
            );
        });
        return (
            <div>
                {itemList}
                <PageChanger page={this.state.page}/>
            </div>
        );
    }
});

如果

render

函数返回

false

，则不会呈现任何内容。 （来源：）

因此，您可以在初始状态下设置标志：

getInitialState: function () {
    return { page: 1, shouldRender: false };
}

然后，在

渲染

中，可以检查该标志：

if (! this.state.shouldRender) return false;

在传递给XHR的回调中，可以更新标志：

this.setState({
  shouldRender: true,
  news: eval(xmlhttp.responseText.toString()),
});

---

首先，抽象对助手的网络调用，并根据需要导入到组件中

其次，使用

componentDidMount

not

componentWillMount

避免多次渲染

例如：

import networkCall from ../helpers/networkCall 
    componentDidMount() {
        this.setState({
            emails: networkCall.news,
            emailCache: networkCall.page
        });
    },

---

@您可以考虑将<代码>道具从<代码> <代码>到<代码> <代码>，并从“代码> <代码>或包装控制器组件中生成批API调用。谢谢。我从文档中忘了这个。