Question

Axios 与 firebase 在放置数据时不会返回数据

2020-06-05

1745

javascript reactjs asynchronous firebase-realtime-database axios

我正在使用 React 和 Firebase 以及 Axios 制作一个调查工具，现在我试图制作一个模板功能，其中我已经创建了一些存储在 firebase 中的调查模板，现在当用户想要访问模板时，我能够以 json 格式获取模板，但我无法将其复制到他们的帐户中。

这是我用来获取调查模板的代码

const fetchSurvey = async () => {
  const res = await axios.get(
    "/surveys/ckb0kmt3n000e3g5rmjnfw4go/content/questions.json"
  );
  console.log(res.data);
};

其中“ckb0kmt3n000e3g5rmjnfw4go”是调查 ID，当我执行此操作时，数据成功登录到控制台，但是当我使用此模板创建新调查时：

const fetchSurvey = async () => {
  const res = await axios.get(
    "/surveys/ckb0kmt3n000e3g5rmjnfw4go/content/questions.json"
  );
  return res.data
};
const content = {
  title: "Your Survey Title",
  subTitle: "Your Survey Description",
  creatorDate: new Date(),
  lastModified: new Date(),
  questions: fetchSurvey(),
  submitting: true
};
this.setState({
  _id: newId(),
  content: content,
  userId: this.props.user_Id
});


}



    clickHandler = () => {
        const newSurvey = { ...this.state };
        axios
          .put(
            "/surveys/" + this.state._id + ".json?auth=" + this.props.token,
            newSurvey
          )
          .then(res => {
            this.props.onGetSurveyId(res.data._id);
          })
          .catch(error => {
            console.log(error);
          });
      };

在此之后，调查确实已创建，但问题键将丢失并且不会呈现任何问题。请帮帮我

Answer 1

const content = {
  ...
  questions: fetchSurvey(),
  ...
};

this.setState({
  ...
  content: content,
  ...
});

这不起作用。 questions: fetchSurvey(), 计算结果为 Promise<any> 您必须在回调中设置状态

componentDidMount() {
  fetchSurvey()
    .then(questions => {
      // either update existing state or create everything there when you get questions
      this.setState(state => ({
        ...state,
        content: {
          ...state.content,
          questions
        }
      }));
  })
}

Answer 2

如果您想从 firebase 获取数据，则应使用 firebase 实例进行查询，如 firestore 或实时数据库。

Firestore 查询教程： https://firebase.google.com/docs/firestore/query-data/get-data#get_a_document

实时数据库教程： https://firebase.google.com/docs/database/web/read-and-write#read_data_once