ReactJS making a http request and displaying the result on page

Question

I have a search bar with a button. when the button is clicked, the search_on_click function runs. This function is supposed to retrieve the html of the URL and display it on the page.

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>

This is the code i have so far. The problems/questions are:

axios does not console.log the html or even seem to run
i have tried fetch/requests and the problems are more or less the same
is there a better way to do this?
i do not think the is a CORS problem because i have used CORS allowing chrome extension.
1. .catch() does not log anything to console either

thank you for your time.

*"i do not think the is a CORS problem"* Why not? (BTW, CORS is a *solution*, not a problem. The problem is running into the [SOP](https://en.wikipedia.org/wiki/Same-origin_policy).) — T.J. Crowder, May 06 '19 at 16:20
Did you debug this and find that there is no request sent (via the "Network" tab of the debugging tools?), or is there an error response? — crashmstr, May 06 '19 at 16:22
The [Axios Example](https://www.npmjs.com/package/axios) has a `.catch` to handle error conditions, and you should be using that. — crashmstr, May 06 '19 at 16:23
in the network tab, there is a brief red URL link that quickly disappears when i click the button that is supposed to activate the axios search — VickTree, May 06 '19 at 16:24
The `.then` only happens on *success*. You should add a `.catch` or otherwise deal with errors. This would be why the "results" never show up. — crashmstr, May 06 '19 at 16:25

Tomer · Accepted Answer · 2019-05-06T17:06:26.557

The URL you are trying to get isn't a valid resource. You should hit a URL that returns some data, in your case its an HTML which has no API for transferring data or CORS enabled for you to access it. Therefore, you won't get the expected result and axios won't be able to deliver your request.

Example of a valid API request https://codesandbox.io/s/jv73ynwz05

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

  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);
      })
  }

See a similar issue here: Enable CORS in fetch api

ReactJS making a http request and displaying the result on page

1 Answers1