React JS：刷新状态常量后我的页面不刷新

Question

我有一个问题，因为当我使用我的函数 setEvents 更新我的状态事件的值（使用我的 setEvents 函数）时，我的页面没有刷新。

看这里：

function App() {
  const [events, setEvents] = useState([]);
  const clickDate = (e)=>{
    const newEvents = events
    const event = {
      id: 'test',
      title: 'my event',
      start: e.dateStr
    }
    newEvents.push(event);
    setEvents(newEvents);
    console.log(events);
  }

  return (
    <div className="App">
      <FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        initialView='timeGridWeek'
        weekends = {weekEnd}
        selectable = {true}
        allDaySlot = {false}
        eventConstraint = "businessHours"
        dateClick = {clickDate}
        events = {events}

      />
    </div>
  );
}

export default App;

我的“console.log(events)”在使用我的 clickDate 函数后正确显示了新事件，但页面没有刷新。

有人有什么建议吗？

谢谢大家！

Answer 1

从技术上讲，您在这里改变状态：

newEvents.push(event);

这有点隐藏在一些 over-complicated 逻辑中，只是为了设置一个新的状态值。当你更新状态时，它是对同一个数组的引用（你现在已经改变了）。

简化您的工作。将状态更新为由前一个元素加上新元素构成的新数组：

const clickDate = (e)=>{
  setEvents([...events, {
    id: 'test',
    title: 'my event',
    start: e.dateStr
  }]);
}

React JS：刷新状态常量后我的页面不刷新

React JS: My page doesn't refresh after my state constant was refresh

fullcalendar

reactjs