使用 Axios 从 Firestore 获取实时数据

Question

我正在使用 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,
      })
    );
};

Answer 1

根据@ShauryaMittal 评论将其发布为社区维基。

问题似乎与您的this.props.getChatList(); 有关。在你的componentdidmount'上，它只被调用一次，所以，它只会在第一次更新聊天。您将需要一种机制来持续调用您的后端以获取聊天记录。

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