Question

我正在尝试创建一个健身应用，我可以在其中提交一些练习并将其称为“锻炼”。我已经将其工作到了一定程度，但是它失败了，因为我的对象是命名对象，而不是匿名对象，这使得它很难扩展

    <Formik
      initialValues={''}
      onSubmit={values => {this.props.submitExercise(values)}}
      render={() => (
        <Form>
          {this.state.exercises.map((exercise, index) => (
            <div>
              {console.log(exercise, 'ex')}
              <label htmlFor="exercise">Exercise</label>
              <Field name={`exercise${index}.name`} />

              <label htmlFor="reps">Reps</label>
              <Field name={`exercise${index}.reps`} type="number" />

              <label htmlFor="sets">Sets</label>
              <Field name={`exercise${index}.sets`} type="number" />

              <label htmlFor="weight">Weight</label>
              <Field name={`exercise${index}.weight`} type="number" />
            </div>
          ))}
          <button type="submit">Submit</button>
        </Form>
      )}
    />


export const submitExercise = workout => {
  console.log(workout) // workout here is coming through as {exercise0: {...}}
  return (dispatch, getState) => {
    dispatch({ type: 'SUBMIT_EXERCISE', workout })
    // dispatch(saveStateToServer(getState().workouts))
  }
}

我想知道填写X练习数量的最佳方法。每个对象都有一个名称，代表，设置，权重等作为对象，然后它们作为一个数组通过。目前，它带有类似硬编码的对象名称。

exercise0: {
  // exercise info
}

但是这意味着当要进行还原时，我需要通过action.workout.exercise0来获取数据，这不是很好的或可扩展的

如何在Formik中提交对象数组？

0 个答案: