Увеличить следующее значение на определенное число по отношению к первому значению

Question

У меня есть приложение, в котором пользователь может установить время для каждого сгенерированного поля.

  const [firstTime, setFirstTime] = useState({});
  const [secondTime, setSecondTime] = useState({});

  const onFinish = values => {
    console.log(
      values.users.map(i => {
        return {
          ...i,
          time0: moment(i.time0).format("HH mm"),
          time1: moment(i.time1).format("HH mm")
        };
      })
    );
  };

  function onChange1(time, timeString, key) {
    console.log(time, timeString);
    setFirstTime({ ...firstTime, [key]: timeString });
  }
  function onChange2(time, timeString, key) {
    console.log(time, timeString);
    setSecondTime({ ...secondTime, [key]: timeString });
  }
  console.log(secondTime, firstTime);
  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) => (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Form.Item
                    {...field}
                    name={[field.name, "first"]}
                    fieldKey={[field.fieldKey, "first"]}
                    key={`item7${index}`}
                    rules={[{ required: true, message: "Missing first name" }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    key={`item8${index}`}
                    name={[field.name, "time0"]}
                    initialValue={moment(
                      firstTime[Object.keys(firstTime)[index - 1]]|| '07:00',
                      "HH mm"
                    ).add(index * 5, "minutes")}
                    fieldKey={[field.fieldKey, "time0"]}
                  >
                    <TimePicker
                      onChange={(date, dateString) =>
                        onChange1(date, dateString, field.key)
                      }
                   
                    />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    key={`item9${index}`}
                    name={[field.name, "time1"]}
                    initialValue={moment(
                      secondTime[Object.keys(secondTime)[index - 1]] || '10:00',
                      "HH mm"
                    ).add(index * 5, "minutes")}
                    fieldKey={[field.fieldKey, "time1"]}
                  >
                    <TimePicker
                      onChange={(date, dateString) =>
                        onChange2(date, dateString, field.key)
                      } 
                    />
                  </Form.Item>

                  <MinusCircleOutlined
                    onClick={() => {
                      remove(field.name);
                    }}
                  />
                </Space>
              ))}

              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  block
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

Идея приложения следующая:

1. Пользователь нажимает add field кнопка, где появляются некоторые поля ввода, где пользователь может добавить значение
2. Значения по умолчанию для средств выбора даты - 07:00 and 10:00 (но пользователь может изменить начальные значения)
3. Следующее значение каждой даты средство выбора, которое будет сгенерировано пользователем, должно быть на 5 минут больше, чем каждое выбранное значение пользователя (из предыдущей строки с указателями времени)
   Ex1:
   07:00 10:00
   07:05 10:05
   
   Ex2:
   Пользователь может изменить первое значение следующим образом:
   07:25 10: 05
   07:30 10: 10
   Пользователь может выбрать следующие значения, например: 07:40 10: 15
   07:45 10: 20
   ... и так далее ..

Теперь идея работает, только если я нажму на `добавить field` без изменения значения из средства выбора даты, и следующие значения будут такими же, как я описал, но возникает проблема, когда я пытаюсь изменить значение для ma picker, потому что следующие сборщики не принимают во внимание, что значение должно быть выше на 5 минут.
** Вопрос **: Как решить проблему и реализовать идею, описанную выше?
demo :

https://codesandbox.io/s/hungry-star-nu5ld?file= / index. js: 365-3725

Answer 1

Прежде всего, мы не видим здесь никакого кода, который отслеживает ваше неизмененное значение. Кроме того, вы добавляете 5 минут на лету, но не ведете их учет.

Чтобы решить эту проблему, давайте сделаем все это непосредственно перед вызовом add:

 <Button
     type="dashed"
     onClick={() => {
                const length = Object.keys(firstTime).length;
                if (length > 0) {
                  const newTime = moment(
                    secondTime[length - 1],
                    "HH mm"
                  )
                  const newSecTime = moment(
                    secondTime[length - 1],
                    "HH mm"
                  ).add(5, "minutes");
                  setFirstTime({ ...firstTime, [length]: newTime });
                  setSecondTime({ ...secondTime, [length]: newSecTime });
                } else {
                  setFirstTime({ ...firstTime, [length]: "07:00" });
                  setSecondTime({ ...secondTime, [length]: "10:00" });
                }
                add();
              }}
     block
     >
     <PlusOutlined /> Add field
     </Button>

Далее позволяет использовать свойство defaultValue для timepicker для отображения значения:

 <TimePicker
    defaultValue={moment(firstTime[index], "HH mm")}
    onChange={(date, dateString) =>
    onChange1(date, dateString, field.key)
     }
  />