最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React, page is refreshing constantly - Stack Overflow

programmeradmin4浏览0评论

I was playing around with react for my first time and ran into some issues. I am creating 3 buttons with values and then executing a function when they're clicked that sends a post request and gets back data which is displayed to the user. For some reason, the _postURL function is being executed infinitely even when I dont click on the buttons. Does anyone know why?

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

I was playing around with react for my first time and ran into some issues. I am creating 3 buttons with values and then executing a function when they're clicked that sends a post request and gets back data which is displayed to the user. For some reason, the _postURL function is being executed infinitely even when I dont click on the buttons. Does anyone know why?

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>
        );          
    }
});
Share Improve this question asked Mar 16, 2015 at 4:31 user3716926user3716926 451 gold badge1 silver badge7 bronze badges 3
  • 1 The onClick attribute expects a function but you are passing undefined. – elclanrs Commented Mar 16, 2015 at 4:33
  • is this._postURL("api_log_colo2_mysql2_Dec2014") not a valid function? – user3716926 Commented Mar 16, 2015 at 4:35
  • You are executing the function, then passing what the function returns, and it returns nothing, so undefined. Try this._postURL.bind(this, 'api_log...') – elclanrs Commented Mar 16, 2015 at 4:36
Add a ment  | 

5 Answers 5

Reset to default 2

The onClick attribute expects a function but you are executing the function, which returns undefined. You can use bind:

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

Each of the onClick functions that you have defined are being called once the render is called. Once the function is called, it updates the state of the ponent, which fires the render again. That is why it happens indefinitely. Since jsx is really just javascript, the functions are being executed once they are evaluated. As elclanrs stated, you can use .bind() to have your function wait to be called until the button is clicked.

You are calling function in onClick={this._postURL("api_log_colo2_mysql2_Jan2015")}, which is called on render itself before clicking button. In that function setState is used resulting in constant rendering in loop.Try passing function reference only like onClick={() => {this._postURL("api_log_colo2_mysql2_Jan2015")}}

I know exactly this problem! You can solve it by just adding ()=> to onClick function.

I was facing the issue of the browser refreshing every time I was using a form and to prevent this you should add the prevent default handle.

e.preventDefault();

in my case the ponent was like:

import './Meme.css'
import data from './memesData.js'


let Meme=()=>{
    console.log(data)
    let handleClick=(e)=>{
        e.preventDefault();
        console.log("I was clicked")
    }

    return(
        <div className="meme">
        <form className="form">
        <input className="form--inputs" type="text" placeholder="Top Text" />
        <input className="form--inputs" type="text" placeholder="Bottom Text" />
        <button className="form--button" onClick={handleClick}>Get a new meme image </button>
        </form>

        </div>
    )
}

export default Meme;

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论