尝试获取 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