问题
I have the application what count the difference between 2 hours which user sets.
Now when i set first hours like:
13:00 and 14:00, i get difference - the diff is 1hours and 0minutes,
when i set the second time adding another field, the second field overrides the previous value, and on the first i get: difference - the diff is 0hours and 0minutes.
How to solve this?
demo: https://codesandbox.io/s/runtime-bird-6mlfs?file=/index.js
code:
const Demo = () => {
const [date, setDate] = useState({});
const [fullDate2, setFullDate2] = useState({});
const onFinish = values => {
console.log("Received values of form:", values, date);
};
const changeDate1 = (momentDate, dateString, key) => {
console.log(dateString, key);
setDate({ ...date, [key]: dateString });
};
const changeDate2 = (momentDate, dateString, key) => {
setFullDate2({ ...date, [key]: dateString });
};
console.log(date, fullDate2.length);
const myDiff = (startSubEventTimes, endSubEventTimes, k) => {
if (Object.keys(endSubEventTimes).length) {
const startTime = moment(startSubEventTimes[k], "HH:mm");
const endTime = moment(endSubEventTimes[k], "HH:mm");
const duration = moment.duration(endTime.diff(startTime));
const hours = parseInt(duration.asHours(), 0);
const minutes = parseInt(duration.asMinutes(), 0) - hours * 60;
return `the diff is ${hours}hours and ${minutes}minutes`;
}
};
return (
<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
<Form.List name="users">
{(fields, { add, remove }) => {
return (
<div>
{fields.map(field => (
<Space
key={field.key}
style={{ display: "flex", marginBottom: 8 }}
align="start"
>
<Form.Item
{...field}
name={[field.name, "first"]}
fieldKey={[field.fieldKey, "first"]}
rules={[{ required: true, message: "Missing first name" }]}
>
<Input placeholder="First Name" />
</Form.Item>
<TimePicker
defaultValue={moment("12:08", format)}
format={format}
onChange={(date, dateString) =>
changeDate1(date, dateString, field.key)
}
/>
<TimePicker
defaultValue={moment("12:08", format)}
format={format}
onChange={(date, dateString) =>
changeDate2(date, dateString, field.key)
}
/>
<p>{date[field.key]}</p>
<p>{fullDate2[field.key]}</p>
<span>
difference -{" "}
{Object.keys(fullDate2).length
? myDiff(date, fullDate2, field.key)
: 0}
</span>
<MinusCircleOutlined
onClick={() => {
remove(field.name);
}}
/>
</Space>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
block
>
<PlusOutlined /> Add field
</Button>
</Form.Item>
</div>
);
}}
</Form.List>来源：https://stackoverflow.com/questions/62769208/second-value-overrides-previous-in-reactjs