Как можно предварительно выбрать переключатели и раскрывающиеся опции в React / Redux, когда они связаны между собой, когда пользователь находится в режиме редактирования?

Question

Я использую React & Redux для внешнего интерфейса и Node / Express с MySQL на внутреннем.

Итак, есть простой компонент с формой, в которой пользователь может создать работу.

Существует несколько переключателей и раскрывающийся список в форме, которые связаны между собой, т.е. один из переключателей во второй группе переключателей выбирается автоматически в зависимости от того, какой переключатель выбран впервая группа.

Затем значения в раскрывающемся меню заполняются в зависимости от того, какой переключатель выбран во второй группе переключателей.

Когда пользователь находится в режиме редактирования, я звонюAPI для получения подробной информации о созданном задании и заполнения формы.Я могу заполнить заголовок, но у меня проблемы с автоматическим выбором переключателей и выпадающих опций, потому что они связаны между собой.

Это то, что я пробовал до сих пор:

this.state = {
  country: '',
  title: '',
  jobId: '',
  selectedCategory: '',
  selectedJobType: '',
  selectedSupportStage: '',
  selectedTaskType: '',
  recommendJobType: '',
  jobTypeId: '',
  skillsList: [],
  createJobCategory: [],
  jobTypeList: [],
};

componentDidMount() {
  this.props.actionLoaderShow();
  this.props
    .actionGetJobSkills()
    .then(() => this.props.actionLoaderHide())
    .catch(() => this.props.actionLoaderHide());
    const jobId = this.props.fullJob.jobId;
    // Getting the jobId from the job details page via the Redux Store.
    if (jobId) {
      this.props
        .actionGetCreatedJob({ jobId })
        .then(res => {
          this.props.actionLoaderHide();
          const result = res.payload.data;
          const jobSkills = result.jobSkills;
          const filteredTaskType = this.props.jobSkillsList.filter(
             item => item.skillID === jobSkills[0]
          );
          const { secondarySkill, primarySkill, stage } = filteredTasktype[0];
          this.setState({
            title: result.jobTitle,
            selectedTaskType: secondarySkill,
            selectedJobType: result.jobType,
            selectedCategory: primarySkill,
            selectedSupportStage: stage
          });
         })
         .catch(err => console.log(err));   
     }
}

filterStageByCategorySelection(categoryValue) {
  let stageList = _.filter(this.props.createJob.createJobSkillsList, o => {
    if (o.primarySkill === categoryValue) return true;
    return false;
  });

  stageList = _.uniqBy(stageList, 'stage');
  // stageList = _.orderBy(_.unionBy(stageList, 'stage'), ['stage'], ['asc']);
  stageList = _.orderBy(stageList, ['stage'], ['asc']);

  this.setState({
    stageList: stageList
  });
}

filterTaskTypeByStageAndCategory() {

  let jobTypeList = _.filter(
    this.props.createJob.createJobSkillsList,
    o => {
      if (
        o.primarySkill === this.state.selectedCategory &&
        o.stage === this.state.selectedSupportStage
      )
        return true;
        return false;
    }
  );

  jobTypeList = _.uniqBy(jobTypeList, 'secondarySkill');
  jobTypeList = _.orderBy(jobTypeList, ['secondarySkill'], ['asc']);

  this.setState({
    jobTypeList: jobTypeList
  });
}

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

handleChangeJobType(e) {
  const { value } = e.target;
  this.setState({
    selectedJobType: value
  });
}

handleChangeStage(e) {
  const { value } = e.target;
  this.setState(
    {
      selectedSupportStage: value,
      jobTypeList: [],
      recommendJobType: ''
    },
    () => {
      this.filterTaskTypeByStageAndCategory();
    }
  );
}

handleChangeTaskType(e) {
  const { value } = e.target;
  this.setState({ selectedTaskType: value });
}

handleChangeCategory(e) {
  const { value } = e.target;
  this.setState(
    {
      selectedCategory: value,
      selectedSupportStage: '',
      jobTypeList: [],
      recommendJobType: ''
    },
    () => {
      this.filterStageByCategorySelection(this.state.selectedCategory);
   }
 );
}

render() {
  const createJobCategory = this.props.createJob.createJobCategory || [];
  const stageList = this.state.stageList || [];
  const jobTypeList = this.state.jobTypeList || [];

  return (
    <div className="wt-dashboardbox">
      <div className="wt-widget wt-effectiveholder wt-tabsinfo">
        <div className="wt-tabscontenttitle">
          <h2>Select Category</h2>
        </div>

    <div className="wt-widgetcontent">
      <form
        id="formCategory"
        className="wt-formtheme wt-formsearch"
      >
        <fieldset>
          {this.props.jobId ? (
          {*/ If jobId exists, it means the user is in Edit Mode */}
            <div className="wt-checkboxholder">
              {createJobCategory.map(item => {
                return (
                  <span
                    className="wt-radio form-group form-group-half"
                    key={'t' + item.primarySkill || ''}
                  >  
                    <input
                      required
                      id={
                        'tid' + this.state.selectedCategory || ''
                      }
                      type="radio"
                      name="category"
                      checked={
                      this.state.selectedCategory ===
                      item.primarySkill
                      }
                      value={
                      this.state.selectedCategory || ''
                      }
                      onChange={e =>
                        this.handleChangeCategory(e)
                      }
                    />
                    <label
                      htmlFor={
                      'tid' + this.state.selectedCategory || ''
                      }
                    >
                      {item.primarySkill}
                    </label>
                  </span>
                );
              })}
            </div>
          ) : !this.props.jobId ? (
            <div className="wt-checkboxholder">
              {createJobCategory.map(item => {
                return (
                  <span
                    className="wt-radio form-group form-group-half"
                    key={'t' + item.primarySkill}
                  >
                    <input
                      required
                      id={'tid' + item.primarySkill}
                      type="radio"
                      name="category"
                      value={item.primarySkill}
                      onChange={this.handleChangeCategory}
                    />
                     <label
                       htmlFor={'tid' + item.primarySkill}
                     >
                       {item.primarySkill}
                     </label>
                   </span>
                 );
               })}
             </div>
           ) : (
             ''
           )}
         </fieldset>
       </form>
     </div>
   </div>

   <div className="wt-dashboardboxcontent">
     <div className="wt-jobdescription wt-effectiveholder wt-tabsinfo">
       <div className="wt-tabscontenttitle">
         <h2>At what stage you are looking for support</h2>
       </div>

       <form
         id="formSupportStage"
         className="wt-formtheme wt-userform wt-userformvtwo"
       >
         <fieldset id="stage">
           {this.props.jobId ? (
             <div className="wt-checkboxholder">
               {stageList.map(item => {
                 return (
                   <span
                     className="wt-radio form-group form-group-half"
                     key={'ksid' + item.stage}
                   >
                     <input
                       required
                       id={
                         'sid' +
                         this.state.selectedSupportStage
                       }
                       type="radio"
                       name="stage"
                       checked={
                         this.state.selectedSupportStage ==
                         item.stage
                       }
                       onChange={event => {
                         this.handleChangeStage(event);
                       }}
                       value={item.stage}
                     />
                     <label
                       htmlFor={
                         'sid' +
                         this.state.selectedSupportStage
                       }
                     >
                       {item.stage}
                    </label>
                  </span>
                );
              })}
            </div>
          ) : !this.props.jobId ? (
            <div className="wt-checkboxholder">
              {stageList.map(item => {
                return (
                  <span
                    className="wt-radio form-group form-group-half"
                    key={'ksid' + item.stage}
                  >
                   <input
                     required
                     id={'sid' + item.stage}
                     type="radio"
                     name="stage"
                     checked={
                       this.state.selectedSupportStage == item.stage
                     }
                     onChange={event => {
                       this.handleChangeStage(event);
                     }}
                     value={item.stage}
                   />
                   <label htmlFor={'sid' + item.stage}>
                    {item.stage}
                   </label>
                 </span>
               );
             })}
           </div>
         ) : (
           ''
         )}
       </fieldset>
     </form>
   </div>

<div className="wt-jobskills wt-tabsinfo">
  <div className="wt-tabscontenttitle">
    <h2>Select Task Type</h2>
  </div>

  <form
    id="formTaskType"
    className="wt-formtheme wt-userform wt-userformvtwo"
  >
    <fieldset>
      {this.props.jobId ? (
        <div className="form-group form-group-half">
          <span className="wt-select">
            <select
              required
              name="taskType"
              onChange={e => {
                this.handleChangeTaskType(e);
              }}
            >
              <option value="">Select Task Type</option>
                {jobTypeList.map((item, index) => {
                  return (
                    <option
                      selected={this.state.selectedTaskType}
                      value={item.secondarySkill}
                      key={'ss' + index}
                    >
                      {item.secondarySkill}
                    </option>
                  );
                })}
              </select>
            </span>
          </div>
        ) : !this.props.jobId ? (
          <div className="form-group form-group-half">
            <span className="wt-select">
              <select
                required
                name="taskType"
                onChange={e => {
                  this.handleChangeTaskType(e);
                }}
              >
                <option value="">Select Task Type</option>
                  {jobTypeList.map((item, index) => {
                    return (
                      <option
                        value={item.secondarySkill}
                        defaultValue={
                        this.state.selectedTaskType
                        }
                        key={'ss' + index}
                      >
                        {item.secondarySkill}
                      </option>
                    );
                  })}
                </select>
              </span>
            </div>
          ) : (
            ''
          )}
        </fieldset>
      </form>
    </div>


    <div className="wt-attachmentsholder">
      <div className="wt-tabscontenttitle">
        <h2>Enter the Title</h2>
      </div>

      <form
        id="formTitle"
        className="wt-formtheme wt-formprojectinfo wt-formcategory"
      >
        <fieldset>
         {this.props.jobId ? (
          <div className="form-group">
            <textarea
              name="title"
              value={this.state.title}
              className="form-control"
              placeholder="Enter Job Title Here"
              onChange={event => {
                this.handleChange(event);
              }}
              required
            />
          </div> ) : !this.props.jobId ? (
          <div className="form-group">
            <textarea
              name="title"
              value={this.state.title || ''}
              className="form-control"
              placeholder="Enter Job Title Here"
              onChange={event => {
                this.handleChange(event);
              }}
              required
            />
          </div>
          ) : ( '' )}
        </fieldset>
      </form>
    </div>
  </div>
</div>

Спасибо.