反應按鈕不顯示

Question

我是React的初學者，並且嘗試學習和改進，這里我有一個需要單擊的按鈕，此后應該出現一堆數字，例如1：1 1：2 1：3，但是在這里我似乎有一個問題，我的按鈕沒有出現，只有URL中的數字出現了，並且我也有css到我的按鈕，當刷新頁面時css只能工作1秒鍾，然后消失並且我沒有收到任何錯誤消息。 。

這是代碼：

import React, { Component } from 'react'

class Button extends Component {
    componentWillMount() {
        var proxyurl = "https://cors-anywhere.herokuapp.com/";
        var url = "http://*****.******.com/numbers.txt";
        fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
            .then(response => response.text())
            .then(contents => document.write(contents))
    }

    render() {
        return (
          <div className="whole">
            <button onClick={this.componentWillMount} >Increment</button>
          </div>
        )
    }
}

export default Button;

.whole {
  background-color: blue;
  color: red;
  margin: 50px 0;
  padding: 0px;
  text-align: center;
}

#root {
  white-space: pre;
}

英語不是我的母語，所以很抱歉犯錯。

Answer 1

componentWillMount是componentWillMount的生命周期事件，不應像這樣使用（ 也建議不再使用componentWillMount ）。

如果您希望按鈕檢索數據，則需要創建一個新函數並將其分配給按鈕的onClick屬性。 例如：

handleClick = () => {
    var proxyurl = "https://cors-anywhere.herokuapp.com/";
    // more code
    .then(contents => this.setState({ responseText: contents }))
}

render() {
    return (
        <div className="whole">
            <button onClick={this.handleClick}>Increment</button>
        </div>
        <div>{this.state.responseText}</div>
    );
}