ReactJS - выборка в asyn c onclick не работает - PullRequest
Новая
       8

ReactJS - выборка в asyn c onclick не работает

0 голосов
/ 05 мая 2020

Проблемы с сохранением изменений с помощью функции asyn c при вызове из обработчика событий onClick. У меня есть функции, которые я вызываю: 

        retrieveData = async () =>{
        try {
            console.log(1)
            console.log(this.state.ID)
            const url = this.baseUrl + "api/" + this.state.ID
            let response = await fetch(url, {mode: "cors"})
            const data = await response.text()
            this.setState({testVal: data})
            console.log(data)
        } catch (e) {
            console.error(e)
        }
    }

Вышеупомянутая функция работает, когда я помещаю ее содержимое в componentDidMount () и жестко кодирую идентификатор состояния. Но не тогда, когда я пытаюсь вызвать функцию извлеченных данных таким образом, поэтому я предполагаю, что в следующем фрагменте кода ошибка. 

    render() {
        return(
            <div>
                <div>
                    <form>
                        <label>
                            ID:
                            <input type="text" onChange={e => this.setState({ID: e.target.value})}/>
                        </label>
                        <input type="submit" onClick={async () =>{await this.retrieveData();}}/>
                    </form>
                </div>
                <div>
                    {this.state.ID}
                    {this.state.testVal}
                </div>
            </div>
        );
    }

Я новичок в reactJS, поэтому я уверен, что это что-то просто. Когда я нажимаю кнопку отправки, я вижу, как консоль выдаёт 1, затем ID, который я только что ввел, а затем оба сразу исчезают. Когда я проверяю, происходит ли fecth, я не вижу никаких вызовов api, как при тестировании с жестко запрограммированным URL-адресом с componentDidMount (), но я хочу иметь возможность вводить данные пользователя, просто немного не знаю, как это сделать. Я считаю, что проверил практически все ТАК вопросы, которые могу найти по этому поводу, так что я действительно потерялся. Если потребуется дополнительная информация, дайте мне знать, спасибо.

Ответы [ 3 ]

0 голосов
/ 05 мая 2020

Пожалуйста, проверьте этот пример, где вы вызываете api с помощью выборки после нажатия кнопки. 

import React, {Component} from "react";

class FetchExample extends React.Component {
    state = {
        isLoading: false,
        questions: [],
        error: null
    };

    fetchQuestions = () => {
        fetch(`https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean`,)
            .then(response => {
                    if (response.status !== 200) {
                        console.log('There was a problem. Status Code: ' + response.status);
                        return;
                    }
                    response.json().then(data => {
                        console.log(data);
                        this.setState({
                            questions: data,
                            isLoading: false
                        })
                    });
                }
            )
            .catch(function (error) {
                console.log('Error: ', error);
                this.setState({error, isLoading: false})
            });
    };

    render() {
        const {isLoading, questions, error} = this.state;
        return (
            <React.Fragment>
                <h1>Random Question</h1>
                <button onClick={this.fetchQuestions}>Click for calling API using fetch</button>
                {error ? <p>{error.message}</p> : null}

                {!isLoading && questions.results ? (
                    questions.results.map((questions, index) => {    //something right here
                        //is erroring
                        const {question, category, type, difficulty} = questions;
                        return (
                            <div key={index}>
                                <p>Question: {question}</p>
                                <p>Question Type: {type}</p>
                                <p>Difficulty: {difficulty}</p>
                                <hr/>
                            </div>
                        );
                    })
                ) : isLoading ? (
                    <h3>Loading...</h3>
                ) : null}
            </React.Fragment>
        );
    }
}

export default FetchExample;
0 голосов
/ 05 мая 2020

Спасибо всем за вашу помощь, это следующее изменение, которое я сделал.

Я изменил 

<input type="submit" onClick={async () =>{await this.retrieveData();}}/>

На это 

<input type="button" value= "submit" onClick={e=>this.retrieveData(e)}/>

И теперь он работает отлично, так что никаких проблем с этим. Еще раз спасибо.

0 голосов
/ 05 мая 2020

Проблема в том, что выполняется обработчик отправки формы, который обновляет страницу, так как по умолчанию это событие отправки не предотвращается. Чтобы решить эту проблему, я бы рекомендовал переместить обработчик с кнопки ввода в обработчик формы. Вам также необходимо предотвратить отправку формы, чего вы можете достичь с помощью события обработчика формы и preventDefault(). В противном случае страница будет обновляться sh при отправке формы. 

handleChange = (e) => {
  this.setState({ ID: e.target.value });
}

retrieveData = async (e) =>{
  e.preventDefault();

  try {
      console.log(1)
      console.log(this.state.ID)
      const url = this.baseUrl + "api/" + this.state.ID
      let response = await fetch(url, {mode: "cors"})
      const data = await response.text()
      this.setState({testVal: data})
      console.log(data)
    } catch (e) {
      console.error(e)
    }
}

render() {
  return(
      <div>
          <div>
              <form onSubmit={this.retrieveData}>
                  <label>
                      ID:
                      <input type="text" handleChange={this.handleChange} />
                  </label>
                  <button type="submit">Submit</button>
              </form>
          </div>
          <div>
              {this.state.ID}
              {this.state.testVal}
          </div>
      </div>
  );
}

Обратите внимание, что я удалил обработчик щелчка из элемента управления отправкой ввода, потому что я предполагаю, что при нажатии на кнопку происходит два события затем также отправить в форму. Пока происходил щелчок элемента управления отправкой ввода, отправка в самой форме не предотвращалась и вызывала обновление страницы sh и предотвращение завершения HTTP-запроса.

Надеюсь, это поможет!

...