ReactJS делает запрос http и отображает результат на странице - PullRequest
Новая
       19

ReactJS делает запрос http и отображает результат на странице

0 голосов
/ 06 мая 2019

У меня есть панель поиска с кнопкой.при нажатии кнопки запускается функция search_on_click.Предполагается, что эта функция извлекает HTML-адрес URL и отображает его на странице.

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>

Это код, который у меня есть.Проблемы / вопросы:

  1. axios не поддерживает console.log html или даже кажется, что он запускается

  2. Я попытался получить / запросить ипроблемы более или менее одинаковы

  3. есть ли лучший способ сделать это?
  4. я не думаю, что это проблема CORS, потому что я использовал CORS, позволяющий расширение chrome.
  5. .catch () также ничего не регистрирует в консоли

спасибо за ваше время.

1 Ответ

0 голосов
/ 06 мая 2019

URL, который вы пытаетесь получить, не является допустимым ресурсом. Вы должны нажать на URL, который возвращает некоторые данные, в вашем случае это HTML, у которого нет API для передачи данных или CORS, к которому у вас есть доступ. Следовательно, вы не получите ожидаемого результата, и axios не сможет доставить ваш запрос.

Пример правильного запроса API https://codesandbox.io/s/jv73ynwz05

componentDidMount () вызывается сразу после того, как компонент монтируется (вставляется в дерево). Инициализация, которая требует 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);
      })
  }

Смотрите похожую проблему здесь: Включить CORS в fetch api

...