数据未定义,尽管使用了异步和等待

时间:2019-08-11 08:01:04

标签: reactjs firebase asynchronous axios

很抱歉,但是尽管我已寻找解决方案,但仍无法解决问题。

我可以获取res,但是无法使用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不是函数

        this.state.receivedData.map((e, i) => {
          return <div key={i}>{e.Frage}</div>;
        }

也尝试过:this.state.receivedData.Object.map

       )
      )}
    </div>
  );
 }
}

export default QuizLoader;

console.log中的数据概述:

console

1 个答案:

答案 0 :(得分:2)

您的 holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent (v.getContext(), *needed_activity_class*); // put all that you need in intent v.getContext().startActivity(intent); } }); 请求似乎格式不正确。同样,当您通过执行以下操作来破坏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)
     }
   }