Вопрос:

данные не определены, хотя используются асинхронные и ожидающие

reactjs firebase asynchronous axios

9 просмотра

1 ответ

10 Репутация автора

Я извиняюсь, но хотя я искал решение, я не могу решить проблему.

Я могу получить разрешение, но не могу получить к нему доступ с помощью res.data.

Я попытался исправить это с помощью асинхронной функции стрелки.

class QuizLoader extends Component {
  constructor(props) {
   super(props);

   this.state = { 
    receivedData: []
   }
  }

  //load data
  componentDidMount() {
   this.getData();
  }

  getData = async () => {
   const dataBefore =  this.state.receivedData;
   console.log("receivedData before sending is ");
   console.log(dataBefore);


   // get Quiz data from database
   let res = await axios
   .get('https://backend-pflegonaut.firebaseio.com/.json')
   .catch(err => {
    console.log(err);
    return null;
   });

   let { data } = res.data;

Здесь я только неопределен

   console.log({res});

см код ниже

   this.setState({receivedData: data});
  }

render() { 
 return ( 
    <div>
      {this.state.receivedData.length === 0 ? (
        <div>Loading...</div>
      ) : (
        this.state.receivedData.map((e, i) => {
          return <div key={i}>{e.Frage}</div>;
        })
      )}
    </div>
  );
 }
}

export default QuizLoader;
Автор: Pflegonaut Источник Размещён: 11.08.2019 08:01

Ответы (1)


0 плюса

7761 Репутация автора

Ваш axiosзапрос выглядит немного неверно. Также, когда вы разрушаете res.data, делая:

let { data } = res.data

Код реален для создания dataпеременной, используя key-value pairвнутреннюю часть res.data(которой у него нет, потому что это фактически нужный вам массив). Вы идете на один уровень слишком глубоко. Так и должно быть let { data } = res.

Попробуйте это, это текущее соглашение о работе с async/await:

  getData = async () => {
     const dataBefore =  this.state.receivedData;
     try {
        const res = await axios.get("https://backend-pflegonaut.firebaseio.com/.json")

        let { data } = res //turns the data key-value pair into a variable

        this.setState( {receivedData: data} );

     } catch(err){
        console.log(err)
     }
   }
Автор: Christopher Ngo Размещён: 11.08.2019 08:08
Вопросы из категории :
32x32