无法在反应中设置状态

Question

我正在尝试使用 eventoffset 值最初设置为 -1 的函数组件。当用户单击 "ok" 以将值保存在后端 func saveEvent 时，调用 calOffsetUTC 计算新的偏移量和 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

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

Return下一个状态计算值

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 只是代理日期。

无法在反应中设置状态

unable to setstate in react

javascript

reactjs

setstate

react-state