Reactjs 在已更新状态后再次更新状态

我正在构建calendar React.js应用程序

当我单击日历中的某个单元格时，它会创建一个新事件，并将其添加到事件列表状态

事件列表=[{}，{}，{}，{}，{}]

创建新事件时，需要更新此数组中所有其他事件的宽度属性，使其可见

  const createEvent = (e) => {
    let startTime = e.target.id;
    let endTime = day[day.indexOf(e.target.id) + 1];
    let newEvent = {
      id: uuid(),
      startTime,
      endTime,
      height: columnHeight,
      width: 90,
      seq: [startTime, endTime],
    };
    let updEvents = [...events, newEvent];
    setevents(updEvents);
    console.log(newEvent.seq);
    getCollisions()
  };

我的getCollisions函数需要遍历整个列表，并在计算正确的比例后更新宽度

第一个事件被添加好了，但是当我尝试添加第二个事件时，它没有被添加

我认为第二个函数必须在我确保元素已添加到状态之后运行

我试着用useEffect想出一个解决方案，但这当然会创建一个无限循环

const createEvent = (e) => {
    let startTime = e.target.id;
    let endTime = day[day.indexOf(e.target.id) + 1];
    let newEvent = {
      id: uuid(),
      startTime,
      endTime,
      height: columnHeight,
      width: 90,
      seq: [startTime, endTime],
    };
    let updEvents = [...events, newEvent];
    // setevents(updEvents); // <-- update update your state after getColiisions done
    console.log(newEvent.seq);
    getCollisions(updEvents); // <-- pass all the new events
  };

然后在createEvent方法中将版本增量设置为1，如下所示

const createEvent = (e) => {
    ...
    let updEvents = [...events, newEvent];
    setevents({
        data: updEvents,
        version: events.version+1 //<--- increment version just in createEvent method
    });
    console.log(newEvent.seq);
    getCollisions()
  };

const getCollisions = (allEvents) => { // <--- get the events
    let zIndex = 0;
    setzIndexState(0);
    let updEvents = [...events]; // <--- create new updEvents
    for (let slot of day) {
      let eventsInThisSlot = allEvents.filter((event) => ( // <-- use the events arguments.
        event.startTime === slot
      ));
      if (eventsInThisSlot.length > 0) {
        console.log('eventsInThisSlot', eventsInThisSlot)
        let sorted = sortArrays(eventsInThisSlot);
        let width = 100;
        let index = -1;
        for (let event of sorted) {
          width = findParentWidth(slot);
          index = updEvents.findIndex(obj => obj.id === event.id);
          updEvents[index].width = width * (1 - (sorted.indexOf(event) / sorted.length));
          updEvents[index].zIndex = zIndex;
          console.log('zindex', updEvents[index].zIndex)
          zIndex++;
        };
      }
    }

    setevents([ // <--- set the event at once
        ...updEvents
    ]);
    setzIndexState(zIndex);
  }

const [event, setevent] = useState({
    data: [],
    version: 0
});

const createEvent = (e) => {
    ...
    let updEvents = [...events, newEvent];
    setevents({
        data: updEvents,
        version: events.version+1 //<--- increment version just in createEvent method
    });
    console.log(newEvent.seq);
    getCollisions()
  };

useEffect(() => {
    ...
}, [events.version]);