Javascript 如何使用带有react钩子和react redux的react函数组件，根据从第一个下拉列表中选择的内容填充第二个下拉列表？

我试图根据第一个下拉列表的选择填充第二个下拉列表。一个月前，我刚刚开始使用react-JS，使用react-hooks和react-redux

我找到的所有答案都基于类组件，没有一个使用Redux。我只想用react钩子和react redux解决这个问题。任何帮助都将不胜感激。

const AddRequest=({
添加请求，
获取活动，
活动
}) => {
useffect（（）=>{
getActivities（）；
}，[getActivities]）；
常量[formData，setFormData]=useState({
活动：“，
亚活性：“
});
常量{activity，subActivity}=formData；
const onChangeHandler=e=>{
e、 预防默认值（）；
setFormData（{…formData，[e.target.name]：e.target.value}）；
};
const onSubmitHandler=e=>{
e、 预防默认值（）；
addRequest（表单数据、历史记录）；
};
让activityOptions=activities.map（activity=>(
{activity.activityName}
));
返回(
onSubmitHandler（e）}>
onChangeHandler（e）}
>
选择活动
{activityOptions}
onChangeHandler（e）}
>
选择子活动
{activities.subActivities.map（（subAct，index）=>(
{subAct}
))}
({
活动：state.activity.activies，
});
导出默认连接(
MapStateTops，
{addRequest，getActivities}
)（带路由器（添加请求））；

const AddRequest = ({
  addRequest,
  getActivities,
  activities
}) => {
  useEffect(() => {
    getActivities();

  }, [getActivities]);
  const [formData, setFormData] = useState({
    activity: "",
    subActivity: ""
  });

  const { activity, subActivity } = formData;

  const onChangeHandler = e => {
    e.preventDefault();
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const onSubmitHandler = e => {
    e.preventDefault();
    addRequest(formData, history);
  };

  let activityOptions = activities.map(activity => (
    <option key={activity._id} value={activity.activityName}>
      {activity.activityName}
    </option>
  ));

return (
        <form className="form-signin" onSubmit={e => onSubmitHandler(e)}>          
          <div className="form-label-group">
                    <select
                      className="form-control"
                      name="activity"
                      value={activity}
                      onChange={e => onChangeHandler(e)}
                    >
                      <option>Select Activity</option>
                      {activityOptions}
                    </select>
                  </div>

                  <div className="form-label-group">
                    <select
                      className="form-control"
                      name="subActivity"
                      value={subActivity}
                      defaultValue={{ label: "Select sub Activity", value: 0 }}
                      onChange={e => onChangeHandler(e)}
                    >
                      <option>Select Sub Activity</option>
                      {activities.subActivities.map((subAct, index) => (
                        <option key={index} value={subAct}>
                          {subAct}
                        </option>
                      ))}
                    </select>
                  </div>

                  <div className="form-label-group">
                    <input
                      type="text"
                      className="form-control"
                      placeholder="Description (optional)"
                      value={description}
                      required
                    />
                  </div>

                  <hr className="my-4" />

                  <button
                    className="btn btn-lg btn-primary btn-block text-uppercase"
                    type="submit"
                  >
                    Submit
                  </button>
                </form>
);

AddRequest.propTypes = {
  getActivities: PropTypes.func.isRequired,
  addRequest: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  activities: state.activity.activities,

});

export default connect(
  mapStateToProps,
  { addRequest, getActivities }
)(withRouter(AddRequest));