Question

我正在尝试在模态中提交表单，为我的州添加时间和事件。我的样本数据是：

  {
    date: "Sat 2nd",
    enjoyments: ['Football', 'Rugby'],
    achievements: [{'Tennis', '1100am'}, {'Football', '1200pm'],
    id: 1
  },

我有我的表格：

   submitForm(){
        this.props.onChange(this.props.dayId, e.label, )

    }

  render() {

    console.log(this.props)
    var options = [
      { value: 1, label: 'Play Music' },
      { value: 2, label: 'Football' }
    ];

    var hourSelect = [
      { value: 0, label: '00' },
      { value: 1, label: '01' },
      { value: 2, label: '02' },
      { value: 3, label: '03' },
      { value: 4, label: '04' },
      { value: 5, label: '05' },
      { value: 6, label: '06' },
      { value: 7, label: '07' },
      { value: 8, label: '08' },
      { value: 9, label: '09' },
      { value: 10, label: '10' },
      { value: 11, label: '11' },
      { value: 12, label: '12' },
      { value: 13, label: '13' },
      { value: 14, label: '14' },
      { value: 15, label: '15' },
      { value: 16, label: '16' },
      { value: 17, label: '17' },
      { value: 18, label: '18' },
      { value: 19, label: '19' },
      { value: 20, label: '20' },
      { value: 21, label: '21' },
      { value: 22, label: '22' },
      { value: 23, label: '23' }
    ];

    var minSelect = [
      { value: 0, label: '00' },
      { value: 15, label: '15' },
      { value: 30, label: '30' },
      { value: 45, label: '45' }    
    ];

    return (
         <span >
          <ModalWrapper
            onRequestClose={this.props.closeModal}
            style={this.props.customStyles}
            contentLabel="Modal" >

          <h2>Add Achievement</h2>

          <Select
            name="form-field-name"
            value="one"
            options={options}
          />
          <Select
            name="form-field-name"
            value="one"
            options={hourSelect}
          />
          <Select
            name="form-field-name"
            value="one"
            options={minSelect}
          />

            <a href="#" onClick="this.props.closeModal" >Submit</a>

          </ModalWrapper>
      </span>
    )

和我的行动：

export const addAchievement = (id, text) => ({ type: types.ADD_ACHIEVEMENT, text, id, time})

我的reducer目前仅增加了一系列成就，如何更改我的reducer以增加对象数组的时间？

   case ADD_ACHIEVEMENT:
      return state.map(item => {
          if (item.id === action.id) {
              return Object.assign({}, item, {
                achievements: [
                ...item.achievements,
                action.text,
                ]
              });
          }

        return item;
    });

获取数据错误：

 11 |     date: "Sat 2nd",
  12 |     enjoyments: ['Football', 'Rugby'],
> 13 |     achievements: [{'Tennis', '1100am'}, {'Football', '1200pm'}],
     |                             ^
  14 |     id: 1
  15 |   },

Answer 1

您需要在{}

中为onClick提供功能

<a href="#" onClick={this.props.closeModal} >Submit</a>

您也可以将减速器更改为

case ADD_ACHIEVEMENT:

  return state.map(item => {
      if (item.id === action.id) {
          return {...item, 
            achievements: [
            ...item.achievements,
            action.text,
            ],
            date: action.time
          };
      }

      return item;
});

表单上的调度操作提交以将对象添加到reducer中的数组

1 个答案: