Question

我正在尝试使用将eventoffset值初始设置为-1的功能组件。当用户单击“确定”以将值保存在后端func saveEvent中时，调用calOffsetUTC计算新的offset和utc值，从而分别设置状态值。我正在尝试使用新的偏移量和utc值调用addTimeline（），但似乎状态值未更新。

我要去哪里错了。

任何帮助表示赞赏。

const Dialog = (props: Props) => {
  let currentdate = new Date(Date.now());
  const [eventDate, seteventDate] = React.useState(currentdate);
  const [eventOffset, seteventOffset] = React.useState(-1);
  const [eventUTC, seteventUTC] = React.useState();
  const calcOffsetUTC = (date) => {
    var selectedDate = date;

    if (eventOffset == -1) {
      var offset = selectedDate.getTimezoneOffset() * 60;
      var utc = selectedDate.valueOf();
      seteventOffset(offset);              //trying to set state of "eventoffset"
      seteventTime(utc);
    }
  }
  const saveEvent = () => {
    calcOffsetUTC(eventDate);
    props.addTimeline(eventUTC, eventOffset); //latest eventoffset value is not found here.

    }
    const buttons = [];
    buttons.push({ text: translate("ok"), icon: "ok", callback: () => saveEvent() });

    return <Dialog buttons={buttons}  ></Dialog>;
}

Answer 1

很少有选项可以使用正确的更新状态值

返回下一个状态的计算值

const Dialog = (props: Props) => {
  let currentdate = new Date(Date.now());
  const [eventDate, seteventDate] = React.useState(currentdate);
  const [eventOffset, seteventOffset] = React.useState(-1);
  const [eventUTC, seteventUTC] = React.useState();

  const calcOffsetUTC = (date) => {
    var selectedDate = date;

    if (eventOffset === -1) {
      var offset = selectedDate.getTimezoneOffset() * 60;
      var utc = selectedDate.valueOf();
      seteventOffset(offset); 
      seteventTime(utc);
      return { offset, utc }; // return computed values
    }
    return {}; // return defined object for unhappy path
  }

  const saveEvent = () => {
    const { offset, utc } = calcOffsetUTC(eventDate);
    offset && utc && props.addTimeline(utc, offset); // use returned values
  }

  const buttons = [];
  buttons.push({ text: translate("ok"), icon: "ok", callback: () => saveEvent() });

  return <Dialog buttons={buttons}></Dialog>;
}

在处理程序中完成所有操作

const Dialog = (props: Props) => {
  let currentdate = new Date(Date.now());
  const [eventDate, seteventDate] = React.useState(currentdate);
  const [eventOffset, seteventOffset] = React.useState(-1);
  const [eventUTC, seteventUTC] = React.useState();

  const saveEvent = () => {
    var selectedDate = eventDate;

    if (eventOffset === -1) {
      var offset = selectedDate.getTimezoneOffset() * 60;
      var utc = selectedDate.valueOf();
      seteventOffset(offset); 
      seteventTime(utc);
      props.addTimeline(utc, offset);
    }
  }

  const buttons = [];
  buttons.push({ text: translate("ok"), icon: "ok", callback: () => saveEvent() });

  return <Dialog buttons={buttons}></Dialog>;
}

使用效果钩子

const Dialog = (props: Props) => {
  let currentdate = new Date(Date.now());
  const [eventDate, seteventDate] = React.useState(currentdate);
  const [eventOffset, seteventOffset] = React.useState(-1);
  const [eventUTC, seteventUTC] = React.useState();

  useEffect(() => {
    props.addTimeline(eventUTC, eventOffset); // use latest values here
  }, [eventOffset, eventUTC]);

  const calcOffsetUTC = (date) => {
    var selectedDate = date;

    if (eventOffset === -1) {
      var offset = selectedDate.getTimezoneOffset() * 60;
      var utc = selectedDate.valueOf();
      seteventOffset(offset);
      seteventTime(utc);
    }
  }

  const saveEvent = () => {
    calcOffsetUTC(eventDate);
  }

  const buttons = [];
  buttons.push({ text: translate("ok"), icon: "ok", callback: () => saveEvent() 
});

  return <Dialog buttons={buttons}  ></Dialog>;
}

注意：效果是，您最好只进行calcOffsetUTC的回调，因为此时saveEvent仅代表日期。

无法设定状态

1 个答案: