Question

我正在创建一个redux-form Wizard Form，它收集几个应该作为数组存储在redux中的相同类型的输入值。对于上下文，表单收集一个数字值，表示在几组（通常为3到5组）中提升的重量。对于每种运动类型，应该存储一个数组，例如：

form: {
  workout: {
    values: {
      deadlifts: [150, 160, 170, 180],
      bench-press: [135, 155, 175],
      etc ...
    }
  }
}

我的问题是提交值只会覆盖以前的值。我不确定如何（1）将redux存储值初始化为数组，和/或（2）将新值推送到这些数组。

每个练习都有一个向导表格。向导表单由几个WorkoutForm组件组成。向导表单将有关锻炼名称，集合数量等的相关信息传递给具有currentExercise的工作表格。 setIndex来自向导表单组件的状态并跟踪当前集合。

WorkoutForm

const WorkoutForm = ({ currentExercise, setIndex, handleSubmit }) => {

  return (
    <form onSubmit={handleSubmit}>
      <Field 
        name={currentExercise.name} 
        type="number" 
        placeholder={`enter ${currentExercise.track}`} 
        component={renderField} 
        label="exercise" />
      <div>
        <button type="submit" className="next">Submit</button>
      </div>
    </form>
  ) 
}

WorkoutForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  currentExercise: PropTypes.shape({
    name: PropTypes.string.isRequired, // such as 'deadlift'
    reps: PropTypes.array.isRequired, // reps for each set, such as [10,8,6,4]
    track: PropTypes.string.isRequired, // either 'weight' or 'reps'
  }).isRequired,
};

export default reduxForm({
  form: 'workout',              // <------ same form name
  destroyOnUnmount: false,     // <------ preserve form data
  validate
})(WorkoutForm)

RenderField

const renderField = ({ input, label, type, placeholder, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={placeholder} type={type} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

export default renderField

Answer 1

这是我的初步解决方案。感谢elmeister的灵感。

动作创作者

import update from 'immutability-helper';

function setExerciseData(state, exerciseName, value) {
  if (!state[exerciseName]) {
    return Object.assign({}, state, { [exerciseName]: [value]})
  } else {
    return update(state, {
      [exerciseName]: {$push: [value]}
    })
  }
}

减速

gatherFormData

输入提交时会触发{{1}}操作。如果您有意见，我很乐意为您提供更好的解决方案。谢谢！

如何将redux-form输入值推送到数组？

1 个答案: