React，頁面不斷刷新

Question

我第一次玩 React 時遇到了一些問題。 我正在創建 3 個帶有值的按鈕，然后在單擊它們時執行 function 發送發布請求並取回顯示給用戶的數據。 出於某種原因，即使我不單擊按鈕，_postURL function 也會被無限執行。 有誰知道為什么？

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函數中添加()=>來解決它。

Answer 5

每次我使用表單時，我都面臨瀏覽器刷新的問題，為了防止這種情況，您應該添加阻止默認句柄。

e.preventDefault();

在我的例子中，組件是這樣的：

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;