尽管使用 async 和 await ，但数据未定义

Posted 2023-02-22

【中文标题】尽管使用 async 和 await ，但数据未定义

【英文标题】：data is undefined although using async and await

【发布时间】：2019-12-18 06:34:00

【问题描述】：

很抱歉，虽然我搜索了解决方案，但我无法解决问题。

我可以获取 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 中的数据概览：

【问题讨论】：

控制台: res: … res: config: url: "backend-pflegonaut.firebaseio.com/.json", 方法: "get", headers: …, transformRequest: Array(1), transformResponse : Array(1), … data: Frage2: …, Frage3: …, Quiz: … headers: content-type: "application/json; charset=utf-8", cache-控制：“无缓存”，内容长度：“439”请求：XMLHttpRequest onreadystatechange：ƒ，readyState：4，超时：0，withCredentials：false，上传：XMLHttpRequestUpload，...状态：200 statusText：“OK” proto：对象 proto：对象

所以数据在那里:)

嗨，Pflegonaut，试试下面我的解决方案，如果有帮助，请告诉我。

嘿，感谢您的快速帮助 :) 我输入了 try catch 语句，但不幸的是，'console.log(data)' 仍未定义。

我没有足够的帖子来支持它 :) 老实说，我还有另一个问题，它与已解决的问题有关。我随时将其发布在解决方案部分下。

【参考方案1】：

您的axios 请求格式似乎有点错误。此外，当您通过以下方式解构 res.data 时：

let data = res.data

代码试图通过在res.data 中使用key-value pair 来创建一个新的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)
     
   

至于你的测验渲染。看起来您想要显示问题列表及其相应的答案集。试试这样的：

  render() 
    return (
      <div>
        this.state.receivedData.length === 0 ? (
          <div>Loading...</div>
        ) : (
          Object.entries(this.state.receivedData)
            .filter(([key, obj]) => key.includes("Frage"))
            .map(([question, obj]) => 
              return (
                <div>
                  <h4>question</h4>
                  Object.values(obj).map((answer, i) => 
                    return <div key=i>answer</div>;
                  )
                </div>
              );
            )
        )
      </div>
    );