Кнопка реагирования не отображается

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 больше не использовалось ).

Если вы хотите, чтобы кнопка извлекала данные, вам нужно создать новую функцию и назначить ее для 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>
    );
}