使用Axios从Firestore获取实时数据

时间:2020-07-28 18:37:16

标签: node.js reactjs redux google-cloud-firestore axios

我正在使用Axios api,但是遇到问题。我只有后端有Firestore呼叫,而前端没有。我正在使用React和Firestore制作一个聊天应用程序,但似乎无法弄清楚如何通过Axios调用而不是Firestore来获取连续数据。

它只会更新一次,并且不会连续播放。我只需要在前端调用Firestore吗?

这是我的代码从redux动作中调用axios函数。

componentDidMount() {
    this.props.getChatList();
    this.setState({
      chats: Object.values(this.props.allMessages),
    });
  }

componentDidUpdate(prevProps) {
    if (!equal(this.props.allMessages, prevProps.allMessages)) {
      this.props.getChatList();
      this.setState({
        chats: Object.values(this.props.allMessages),
      });
    }
  }

这是使用Axios调用的数据操作功能。

export const getChatList = () => (dispatch) => {
  dispatch({ type: "LOADING_DATA" });
  API.get("messages")
    .then((res) => {
      dispatch({
        type: "GET_MESSAGES",
        payload: res.data,
      });
    })
    .catch(() =>
      dispatch({
        type: "GET_MESSAGES",
        payload: null,
      })
    );
};

1 个答案:

答案 0 :(得分:0)

根据@ShauryaMittal的评论,将其发布为社区Wiki。

问题似乎与您的this.props.getChatList();有关。在您的componentdidmount'上,它仅被调用一次,因此,它仅在第一次更新聊天记录。您将需要一种机制,该机制可以连续调用后端以获取聊天记录。

一种选择是尝试使用seetInterval()方法。如第here条所述,此方法-在特定时间间隔后(通过第二个参数指定)运行一些代码。例如,尝试使用setInterval()连续调用后端。 setInterval(() => this.props.getChatList(), 2000)中的componentdidmount之类的东西,因此每两秒钟会调用getChatList()