javascript - 表单向导-使用Firebase设置状态(form wizard - set state using firebase)

Question

I have a database with the details of a previously filled in form that I am trying to load, and then change and update the database.

(我有一个数据库，其中包含我要加载的先前填写的表单的详细信息，然后更改和更新该数据库。)

Currently I am able to load the values of the database but am having trouble loading them into the state of the form - would love some guidance on how to do this properly.

(目前，我能够加载数据库的值，但是在将它们加载到表单状态时遇到麻烦-希望获得有关如何正确执行此操作的指导。)

this is the react.js code,

(这是react.js代码，)

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

import Paper from "@material-ui/core/Paper";

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

// Workflow Steps
import {Step1, Step2, Step3, Step4,Step5,Step6,Step7,Step8} from '../../components/Workflow/EoT/Steps.js';


const WorkflowId = "3ejAQxPoJ6Wsqsby01S6";

class EoT extends React.Component {
  componentDidMount() {
    this.props.getWorkflow(WorkflowId);
  }

  constructor(props) {
    super(props)
    this.state = {
      currentStep,
      breach,
      Reason,
      cauWea


    }
  }

  _next = () => {
    let currentStep = this.state.currentStep
    currentStep = currentStep + 1
    this.setState({
      currentStep: currentStep
    })
  }

  _prev = () => {
    let currentStep = this.state.currentStep
    currentStep = currentStep <= 1? 1: currentStep - 1
    this.setState({
      currentStep: currentStep
    })
  }

/*
* the functions for our button
*/
previousButton() {
  let currentStep = this.state.currentStep;
  if(currentStep !==1){
    return (
      <button 
        className="btn btn-secondary" 
        type="button" onClick={this._prev}>
      Previous
      </button>
    )
  }
  return null;
}

nextButton(){
  let currentStep = this.state.currentStep;
  if(currentStep <8){
    return (
      <button 
        className="btn btn-primary float-right" 
        type="button" onClick={this._next}>
      Next
      </button>        
    )
  }
  return null;
}

handleChange = event => {
  const {name, value} = event.target
  this.setState({
    [name]: value
  })    
}

  render() {
    const {
      Workflows: {
        Reason,
        breach,
        cauInd,
        cauOth,
        cauWea,
        claimEoT,
        completed,
        createdAt,
        currentStep,
        dateAware,
        dateEotClaim,
        daysClaimed,
        dec,
        delayRespon,
        descB,
        descCau,
        descExt,
        event,
        eviCause,
        eviExtent,
        ifGranDay,
        notice,
        proMitPro,
        proPrePro,
        proResPro,
        recWri,
        stepsMit,
        stepsPre
      }
    } = this.props.data;

    return (
      <React.Fragment>
        <p>Claim - Details</p>
        <Paper>
          <p>Step {currentStep}</p>


        <form onSubmit={this.handleSubmit}>
        {/* 
          render the form steps and pass required props in
        */}
          <Step1 
            currentStep={currentStep} 
            handleChange={this.handleChange}
            notice={breach}
          />

          <Step2 
            currentStep={currentStep} 
            handleChange={this.handleChange}
            delay={Reason}
          />
          <Step3 
            currentStep={currentStep} 
            handleChange={this.handleChange}
            qualifying={cauWea}
          />

          {this.previousButton()}
          {this.nextButton()}

        </form>
        </Paper>
        </React.Fragment>
    );
  }
}

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

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

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

Steps component

(步骤组件)

import React from "react";

export function Step1(props) {
  if (props.currentStep !== 1) {
    return null;
  }
  return (
    <div className="form-group">
      <label htmlFor="notice">
        Has this claim resulted from an event already the subject of an EoT Claim?:
        <select
          name="notice"
          value={props.breach}
          onChange={props.handleChange}
        >
          <option value="True">True</option>
          <option value="False">False</option>
        </select>
      </label>
    </div>
  );
}

export function Step2(props) {
  if (props.currentStep !== 2) {
    return null;
  }
  return (
    <div className="form-group">
      <label htmlFor="delay">
        What event is the subject of this claim?
        <select name="delay" value={props.delay} onChange={props.handleChange}>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
      </label>
      <label htmlFor="qualifying">
        How many days will the contractor be delayed by this event?
        <input
          name="qualifying"
          type="number"
          value={props.qualifying}
          onChange={props.handleChange}
        />
      </label>
    </div>

  );
}

export function Step3(props) {
  if (props.currentStep !== 3) {
    return null;
  }
  return (
    <div className="form-group">
      <label htmlFor="qualifying">
        How many days will the contractor be delayed by this event?
        <input
          name="qualifying"
          type="number"
          value={props.qualifying}
          onChange={props.handleChange}
        />
      </label>
    </div>
  );
}

the dataAction component from redux

(来自redux的dataAction组件)

// 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: []
      });
    });
};

which outputs the state to Workflows : {etc}

(将状态输出到工作流程：{etc})

and a codepen of an older prototype version

(和旧版原型的Codepen)

https://codepen.io/michael-holborn/pen/vYBdLYm

(https://codepen.io/michael-holborn/pen/vYBdLYm)

Thanks in advance,

(提前致谢，)

  ask by Michael Holborn translate from so

Answer 1

等待大神答复