ReactJS发出http请求并在页面上显示结果

Question

我有一个带有按钮的搜索栏。当按钮被点击时，search_on_click功能运行。该函数应该检索URL的html并将其显示在页面上。

class App extends Component{
    constructor(props){
        super(props)
        this.state = {
            html: []
        }
        this.search = this.search.bind(this)
    }
    search(){
        const URL = 'https://www.zerochan.net/Re%3AZero+Kara+Hajimeru+Isekai+Seikatsu?s=fav'


        axios.get(URL)
            .then(data =>{
             console.log(data)
                this.setState({
                    query: data
                })
            })
            .catch(function(error){
               console.log(error);
            })

}
    render(){

        return(
         <div>
        <button onClick={() => this.search()}>search</button>
        <div>{this.state.query}</div>
        </div>

这是我目前掌握的代码。这些问题包括：

>

我尝试过获取/请求，但问题大致相同

谢谢你抽出时间。

Answer 1

您试图获取的URL不是有效的资源。您应该点击一个返回一些数据的URL，在您的例子中，它是一个HTML，没有用于传输数据的API，或者您可以访问它的CORS。因此，您将无法获得预期的结果，axios也无法提供您的请求。

有效API请求的示例https://codesandbox.io/s/jv73ynwz05

组件安装（插入树）后立即调用组件。需要DOM节点的初始化应该在这里。如果需要从远程终结点加载数据，这是实例化网络请求的好地方。

  componentDidMount() {
    // Note the api in the URL path, which means it is a valid endpoint
    axios.get('https://randomuser.me/api/?results=50')
      .then(response => {
        const data = response.data.results;
        this.setState({ data })
      })
      .catch(error => {
        console.log(error);
      })
  }

这里可以看到一个类似的问题：在fetchapi中启用CORS