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是组件的生命周期事件，不应该这样使用（also it is recommended that componentWillMount is no longer used）。

如果您希望按钮检索数据，则需要创建一个新函数并将其分配给按钮的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>
    );
}

反应按钮未显示

1 个答案: