Unable to update state variables after fetch in ReactJS-CodePudding

On form submit, a new event is added in the Database and the details of this new event are returned back via JSON. I want to concatenate this new JSON in the 'events' data so that the 'events' data gets updated automatically. But it is not working. Here is my code. Please see the line commented as //Here. It is where I am trying to update the event state variable but it is not getting updated.

import React, { useState,useEffect } from 'react';

async function getAllEvents() {
    return fetch('http://localhost:8080/get-all-events/', {
      method: 'GET',
      //body: JSON.stringify(credentials)
    })
      .then(
          data => data.json()
        )
   }


export default function Dashboard() {

    const [events, setEvents ] = useState({});
    const [eventName, setEventName] = useState();

    useEffect(() => {
        getEventsWithFetch();
      }, []);

    const getEventsWithFetch = async () => {
        const response = await fetch("http://localhost:8080/get-all-events/");
        const jsonData = await response.json();
        setEvents(jsonData);
      };


      const addEvent = async (name) => {
        const response = await fetch("http://localhost:8080/create-event/",

        {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "title": name,
                "day": "1",
                "month": "2"
              })
          }
        
        ).then((response) => response.json())
        .then((json) => {
           
            events.push(json);
        
            var events_array = events;
            
            setEvents(events_array); //Here

           
      })      
      };  

      const handleSubmit = async e => {
        e.preventDefault();
       var data = new FormData(e.target)

      }

  return(
    <div>
      <p>EVENTS DASHBOARD</p>
      {JSON.stringify(events)}
      <form onSubmit={handleSubmit}>
      <label>
        <p><b>Event Name</b></p>
        <input type="text" name="event_name" onChange={e => setEventName(e.target.value)} />
      </label>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
    </div>
  );
}

CodePudding user response：

You're modifying the read-only state events, instead of using setEvents, which is already a mistake.

Furthermore, the diff-check React does is by reference for objects, so you have to clone events, instead of setting the state to itself:

setEvents([...events, json]); // Using spread to clone the array and add a new element in the end

Otherwise, React sees the same reference being set and ignores it.