Question

我希望将一组日期更新为相同的开始时间和结束时间，并将其更新为状态变量。当我将天数组映射到更新状态变量形式时。检查控制台日志时。要么仅更新开始时间或结束时间，要么仅将1天更新为状态变量

const daystime={
    sunday: {
      start: "3000",
      end: "3000",
    },
    monday: {
      start: "3000",
      end: "3000",
    },
    tuesday: {
      start: "3000",
      end: "3000",
    },
    wednesday: {
      start: "3000",
      end: "3000",
    },
    thursday: {
      start: "3000",
      end: "3000",
    },
    friday: {
      start: "3000",
      end: "3000",
    },
    saturday: {
      start: "3000",
      end: "3000",
    },
  }
  const [form, setForm] = React.useState(daystime);
  const [singleStartTime, setSingleStartTime] = React.useState(new Date());
  const [singleEndTime, setSingleEndTime] = React.useState(new Date());
useEffect(() => {
    if(value==='Same Timing'){
    let starttime='3000'
    let endtime='3000'
    if (singleStartTime._d) {
      if(singleStartTime._d.getMinutes().toString().length<2)
      starttime = singleStartTime._d.getHours().toString() +'0'+singleStartTime._d.getMinutes().toString();
      else
      starttime =singleStartTime._d.getHours().toString() +singleStartTime._d.getMinutes().toString();
      
      days.map((day) => {
        pass(day.title, "start", starttime);
        return "";
      });
    }
    if (singleEndTime._d) {
      if(singleEndTime._d.getMinutes().toString().length<2)
      endtime = singleEndTime._d.getHours().toString() +'0'+singleEndTime._d.getMinutes().toString();
      else
      endtime =singleEndTime._d.getHours().toString() +singleEndTime._d.getMinutes().toString();
      days.map((day) => {
        pass(day.title, "end", endtime);
        return "";
      });
    }}
  }, [singleStartTime, singleEndTime, days]);

  const pass = (day, side, time) => {
    setForm({
      ...form,
      [`${day}`]: { ...form[`${day}`], [`${side}`]: time },
    });
  };

Answer 1

问题

设置状态异步进行。

因此，如果您这样做：setCounter(counter + 1); setCounter(counter + 1); 不加2到计数器（相反，它只加1），因为在应用之前应让状态变量更新它的新国家。（see it live）

在您的情况下，您要在状态变量中更改startDate和endDate 7天（28个状态更新），而不会让form状态变量进行更新：

const [form, setForm] = useState({'sunday': {start: 1, end: 2},
                                    'monday': {start: 1, end: 2}})
setForm([...form, {sunday: {...form.sunday, start: 100}}]);
setForm([...form, {sunday: {...form.sunday, end: 200}}]);
// After update, the form will be: {'sunday': {start: 1, end: 200}, ...}
// !!! PROBELM !!! You shouldn't use multiple setForms right after each others !!!

解决方案：

您应该首先计算新状态，然后再应用它，而不是多次设置状态而不允许应用新状态。

Run It On Codesandbox

useEffect(() => {
 // clone state here
  let newForm = JSON.parse(JSON.stringify(form))
  ...
    if (singleStartTime._d) {
    ...      
      days.forEach(day => {
        newForm = {
          ...newForm,
          [day.title]: { ...newForm[day.title], start: starttime }
        };
      });
    }
   // Do the same for EndTime
   // Apply the new state
   setForm(newForm)
...
}

Run It On Codesandbox

映射数组对象并更新状态变量。数据丢失

1 个答案: