试图获取Firebase数据作为状态加载到组件中然后进行编辑

Question

我正在努力从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放在其中？

Answer 1

export const getWorkflow = () => dispatch => {
  dispatch({ type: LOADING_DATA });
  axios
    .get("/Workflow/:WorkflowId")

[:WorkflowId在这里不是有效的引用，您需要将WorkflowId作为参数传递给此thunk。

Answer 2

最后是我不得不调用工作流而不是工作流：D