reactjs - 试图让firebase数据作为状态加载到组件中，然后进行编辑

问题描述

我正在努力从 Firebase 获取数据以加载到表单向导中。

我现在正在尝试的基本示例只是显示一些给定集合 ID 的 Firebase 数据。

我收到的当前错误是没有正确的工作流 id 被解析到 redux 操作中。

这是反应组件

import React from "react";
import PropTypes from "prop-types";

//Redux
import { connect } from "react-redux";
import { getWorkflow } from "../../redux/actions/dataActions";

const example = '3ejAQxPoJ6Wsqsby01S6';

class EoT extends React.Component {
  componentDidMount() {
    this.props.getWorkflow('3ejAQxPoJ6Wsqsby01S6');
  }


  render() {
    const { Workflow} = this.props.data;

    return (<div>
      <p>Crazy</p>
        <h4>{Workflow.createdAt}</h4>
        </div>  
    );
  }
}

EoT.propTypes = {
  getWorkflow: PropTypes.func.isRequired,
  data: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  data: state.data
});

export default connect(mapStateToProps, {getWorkflow})(EoT);

我有另一个我正在使用的工作流代码，但这只是为了测试我是否可以加载它，

这是我使用邮递员工作的 api 查询。

    // Get Workflow
export const getWorkflow = (WorkflowId) => dispatch => {
  dispatch({ type: LOADING_DATA });
  axios
    .get(`/Workflow/${WorkflowId}`)
    .then(res => {
      dispatch({
        type: SET_WORKFLOW,
        payload: res.data
      });
    })
    .catch(err => {
      dispatch({
        type: SET_WORKFLOW,
        payload: []
      });
    });
};

这是我在该查询中使用的 redux 操作

import {
  SET_PROJECTS,
  LOADING_DATA,
  DELETE_PROJECT,
  POST_PROJECT,
  SET_PROJECT,
  SET_CLAIMS,
  SET_CLAIM,
  DELETE_CLAIM,
  POST_CLAIM,
  SUBMIT_COMMENT,
  SET_WORKFLOWS,
  SET_WORKFLOW
} from "../types";

const initialStateProject = {
  Projects: [],
  Project: {},
  Claims: [],
  Claim: {},
  Workflows: {},
  Workflow: {},
  loading: false
};

export default function(state = initialStateProject, action) {
  switch (action.type) {
    case LOADING_DATA:
      return {
        ...state,
        loading: true
      };

    case SET_WORKFLOWS:
      return {
        ...state,
        Workflows: action.payload,
        loading: false
      };
    case SET_WORKFLOW:
      return {
        ...state,
        Workflow: action.payload
      };
    default:
      return state;
  }
}

希望这有助于解释这个问题 - 我目前想知道我是否可以以某种方式将 id 放入其中？

标签： reactjsfirebasehttpreduxaxios

reactjs - 试图让firebase数据作为状态加载到组件中，然后进行编辑

问题描述

解决方案

推荐阅读