React Hooks Render选择栏选项

Question

我有两个选择栏，并且我希望第二个选择栏中的选项能够根据第一个选择栏中的选择进行渲染：

我在自己的文件中有一个数组：

{ "name": "Accommodation", 
  "needed_skills": ["Proposal Writing", "The McKinsey 7s Framework"]
}

我要这样做，以便如果有人从第一个栏中选择“住宿”，那么他们可用的选项是与“住宿”相对应的needed_skills。

这是我的尝试：

// admin AddCategory.js

import React, {useState, useEffect} from "react";
import Layout from '../core/Layout';
import {isAuthenticated} from '../auth';
import {Link} from 'react-router-dom';
import {createProject, getCategories} from './apiAdmin';
import {jobs_and_skills} from '../core/fixedJobsSkills';

const AddProject = () => {

  const [values, setValues] = useState({
    name: '',
    category: '',
    skills_required: ['']
  });

 const { user, token } = isAuthenticated();

  const { name,
          category,
          skills_required} = values;

  // load categories and set form data
  const init = () => {
    getCategories().then(data => {
      if(data.error) {
        setValues({...values, error: data.error});
      } else {
        setValues({...values, categories: data})
      }
    });
  };




  useEffect(() => {
    init();
  }, []); 


  const handleChange = name => event => {
    setValues({ ...values, error: false, [name]: event.target.value });
  };

  const createInputs = () => {
    return values.skills_required.map((skill, idx) => {
      return (
        <div className="input-group">
            <select 
                  value={skill} placeholder="Enter a skill" 
                  onChange={e => updateSkill(e, idx)} 
                  className="form-control">
                  <option>Select an option...</option>
                        {values.category.required_skills && values.category.required_skills.map((c, i) => (
                          <option 
                                key = {i}
                                value={c._id}>
                                {c.name}
                            </option>
                                ))}
               </select>
              <div className="input-group-append">
                  <button 
                        className="btn btn-outline-danger mb-3" 
                        type="button" 
                        id="button-addon2" 
                        onClick={() => removeSkill(idx)}>x
                   </button>
              </div>
        </div>
      );
    });
  };

  const updateSkill = (e, index) => {
    const userCopy = { ...values };
    userCopy.skills_required[index] = e.target.value;
    setValues(userCopy);
  };

  const removeSkill = index => {
    const userCopy = { ...values };
    const userCopySkills = [...userCopy.skills_required];

    userCopySkills.splice(index, 1);

    setValues({
      ...userCopy,
      skills_required: [...userCopySkills]
    });
  };

  const addSkill = event => {
    event.preventDefault();
    setValues(prevState => {
      return {
        ...prevState,
        skills_required: [...prevState.skills_required, ""]
      }; 
    });
  };



  const clickSubmit = event => {
    event.preventDefault()
    setValues({...values, error: '', loading: true});
    createProject(user._id, token, { name,
          category,
          skills_required })
    .then(data => {
      if(data.error) {
          setValues({...values, error: data.error})
        } else {
          setValues({
            ...values, 
            name: '', 
            skills_required: ['']
          });
        }
    });
  };

  const newPostForm = () => (
    <form className="mb-3" onSubmit={clickSubmit}>

              <div className="form-group">
                  <label className="text-muted">Name</label>
                  <input
                        onChange={handleChange('name')}
                        type="text" 
                        value={name}
                        className="form-control"
                        />
              </div>


              <div className="form-group">
                  <label className="text-muted">Category</label>
                  <select
                        onChange={handleChange('category')}
                        className="form-control"
                        >
                        <option>Select an option...</option>
                        {categories && categories.map((c, i) => (
                          <option 
                                key = {i}
                                value={c._id}>
                                {c.name}
                            </option>
                                ))}
                    </select>
                </div>

                <div>
                      <div>{createInputs()}</div>
                      <button className="btn btn-outline-primary btn-sm mb-3" onClick={addSkill} type="text">
                        Add more skills
                      </button>
                    </div>




                <button className="btn btn-outline-dark">Create Project</button>

    </form>
  );

  return (
      <Layout 
              title="Start something" 
              description="Start a project today." 
              >
          <div className="row">
              <div className="col-md-8 offset-md-2">
                  {newPostForm()}
              </div>
          </div>
      </Layout>
  );
}

export default AddProject;