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

【问题标题】：data is undefined although using async and await尽管使用 async 和 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})' 仍未定义。
我没有足够的帖子来支持它 :) 老实说，我还有另一个问题，它与已解决的问题有关。我随时将其发布在解决方案部分下。

标签： reactjs firebase asynchronous axios

【解决方案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>
    );
  }

【讨论】：