Question

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

2019-08-11

447

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 中的数据概览：

Answer 1

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

let { data } = res.data

代码尝试使用 res.data 中的 键值对 创建一个新 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>
    );
  }