Question

我第一次玩弄反应并遇到了一些问题。我正在创建3个带有值的按钮，然后在它们被点击时执行一个函数，它发送一个帖子请求并获取显示给用户的数据。出于某种原因，即使我没有点击按钮，_postURL函数也会无限执行。有谁知道为什么？

var Test = React.createClass({
getInitialState: function(){

        return { logs: []};
    },
    _postURL: function(name){
        self = this;
        console.log(name);
        $.post("http://localhost:8080/DatabaseDemo/Display.do", {query: name})
            .done(function(data){
                console.log(data);
                self.setState({logs: data});
        });

    },
    render: function() {
        if(!this.state.logs){
            logs = <p>Choose a log</p>
        }
        return (
            <div>
                <form>
                    <button value="api_log_colo2_mysql2_Jan2015" onClick={this._postURL("api_log_colo2_mysql2_Jan2015")}>Jan2015</button>
                    <button value="api_log_colo2_mysql2_Aug2014" onClick={this._postURL("api_log_colo2_mysql2_Aug2014")}>Aug2014</button>
                    <button value="api_log_colo2_mysql2_Dec2014" onClick={this._postURL("api_log_colo2_mysql2_Dec2014")}>Dec2014</button>
                </form>
                <p>{this.state.logs}</p>
            </div>
        );          
    }
});

Answer 1

onClick属性需要一个函数，但是您正在执行该函数，该函数返回undefined。您可以使用bind：

onClick={this._postURL.bind(this, 'api_log...')}

Answer 2

调用渲染后，将调用已定义的每个onClick函数。调用该函数后，它会更新组件的状态，再次触发渲染。这就是它无限期发生的原因。由于jsx实际上只是javascript，因此一旦评估它们就会执行这些函数。正如elclanrs所说，你可以使用.bind()让你的函数等待被调用，直到点击按钮。

Answer 3

您在onClick = {this._postURL（“ api_log_colo2_mysql2_Jan2015”）}中调用函数，该函数在单击按钮之前在渲染自身上被调用。在该函数中使用setState导致循环中不断渲染。 onClick = {（）=> {this._postURL（“ api_log_colo2_mysql2_Jan2015”）}}

Answer 4

我完全知道这个问题！您只需将()=>添加到onClick函数即可解决此问题。

反应，页面不断刷新

4 个答案: