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

Question

对不起，虽然我搜索了解决方案，但我无法解决问题。

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

标签： reactjsfirebaseasynchronousaxios

Answer 1

您的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)
     }
   }

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

  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>
    );
  }