не может установить в реакцию - PullRequest
Новая
       57

не может установить в реакцию

0 голосов
/ 28 апреля 2020

Я пытаюсь использовать компоненты функций, в которых значение смещения события изначально установлено равным -1. когда пользователь нажимает «ок», чтобы сохранить значения в бэкэнде, вызывается fun c saveEvent и в этом calOffsetUT C вычисляет новое смещение и значения ut c, которые соответственно устанавливают значения состояния. Я пытаюсь вызвать addTimeline () с новыми значениями смещения и ut c, но кажется, что значения состояния не обновляются.

где я иду не так.

Любая помощь приветствуется. 

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>;
}

1 Ответ

1 голос
/ 28 апреля 2020

Несколько вариантов использования правильных обновленных значений состояния

Возвращение вычисленных значений следующего состояния 

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 просто передает дату.

...