访问数组为用户进行下拉列表选择,同时导入对象

问题描述 投票:0回答:0

我正在导入这样一个对象文件

 const exercisePack = {
    squatExerciseMain,
    randomPackLegsBasic,
    randomPackUpperBodyAndAbdomen,
    randomPackUpperBodyChestAndArms,
   ...
  };

这些变量中的每一个都是一个包含对象的数组

const pullExercisesBodyweightVertical = [
    new AccessoryExercise('Pull-ups',[3,10],['forearm', 'arms', 'upperback', 'shoulders'],['pull', 'bilateral']),
    new AccessoryExercise('Pull-ups neutral grip',[3,10],['forearm', 'arms', 'upperback', 'shoulders'],['pull', 'bilateral']),
...
].

我想以一种可以在下拉列表中访问它们并在该组件中使用 reducer 的方式使用它们

<tr className="Accesories">
          <td> <h3>II. {accesoryExerciseFirst.name} </h3> </td>  
          <td></td>
          <td>
            <button className={classes.IncrementationButton} onClick={() => dispatch({ type: "DECREMENT_SETS", exercise: "accesoryExerciseFirst" })}> - </button>
            <h3> {state.accesoryExerciseFirst.sets} </h3>
            <button className={classes.IncrementationButton} onClick={() => dispatch({ type: "INCREMENT_SETS", exercise: "accesoryExerciseFirst" })}> + </button>
          </td>
          <td>
            <button className={classes.IncrementationButton} onClick={() => dispatch({ type: "DECREMENT_REPS", exercise: "accesoryExerciseFirst" })}> - </button>
            <h3> {state.accesoryExerciseFirst.reps} </h3>
            <button className={classes.IncrementationButton} onClick={() => dispatch({ type: "INCREMENT_REPS", exercise: "accesoryExerciseFirst" })}> + </button>
          </td>
          </tr>

我知道每个配件都有自己的组和次数,并且知道在进行更改时也必须更新此状态,我如何使用减速器更改配件练习?

这就是现在的reducer

function exerciseReducer(state:any, action: Action) {
  switch (action.type) {
    case "CHANGE_MAIN_EXERCISE":
      return {
        ...state,
        mainExercise: action.exercise
      };
      
    case "CHANGE_ACCESSORY_EXERCISE":
      return {
        ...state,
        accessoryExercise: action.exercise
      };
      
    case "INCREMENT_SETS":
      return {
        ...state,
        [action.exercise]: {
          ...state[action.exercise],
          sets: state[action.exercise].sets + 1
        }
      };
    case "DECREMENT_SETS":
      return {
        ...state,
        [action.exercise]: {
          ...state[action.exercise],
          sets: state[action.exercise].sets - 1
        }
      };
    case "INCREMENT_REPS":
      return {
        ...state,
        [action.exercise]: {
          ...state[action.exercise],
          reps: state[action.exercise].reps + 1
        }
      };
    case "DECREMENT_REPS":
      return {
        ...state,
        [action.exercise]: {
          ...state[action.exercise],
          reps: state[action.exercise].reps - 1
        }
      };
    default:
      return state;
  }
}
javascript reactjs typescript hook
© www.soinside.com 2019 - 2024. All rights reserved.