使用 React useState 更改对象数组

Question

I have a calendar app that renders its events with an array of objects:

const [events, setEvents] = useState([
    {
      title: "Werk",
      start: moment().toDate(),
      end: moment(),
      allDay: false,
    },
  ])

I am trying to allow the user to add new events with the inputs on the page. So far I am just trying to change the title of the event with this code

<input
          placeholder="Name"
          onChange={(e) =>
            setEvents([{ ...events, title: e.target.value }, console.log(events.title)])
          }
          required
        ></input>

When I console.log(e.target.value) it gives me what I am typing in, but the (events.title) is giving me undefined.
My end goal is to have the user add new events with the inputs in the following format. If I'm on the wrong track, or you know a better way I'd love to hear it.

const [events, setEvents] = useState([
    {
      title: "Werk",
      start: moment().toDate(),
      end: moment(),
      allDay: false,
    },
// this is what the user will add 
    {
    title: "Example",
      start: Number,
      end: Number
    }

  ])

Thank you in advance, my full code is Here And here is a codesandbox:https://codesandbox.io/embed/gracious-minsky-pp1w5?codemirror=1

Answer 1

I think that that console.log is missplaced, you shouldn't be calling that function inside an array assignment. And even if you call it below the setEvents function will not give you the title because the set function of the useState is asynchronous. Also I think you are not doing right the assignment of the events into your array.

In this line:

setEvents([{...events, title: e.target.value }, console.log(events.title)])

You are spreading the events inside a new array and then adding the title, leaving you with a structure similar to this:

[{
    "0": {
        "title": "Werk",
        "start": "2020-12-05T05:12:57.931Z",
        "end": "2020-12-05T05:12:57.931Z",
        "allDay": false
    },
    "title": "myNewTitle"
}]

And nesting this titles for every change in the input.

For the structure you want to achieve you must push a new entry into an array that already contains your previous events, and then update the state. Like:

//I think the best approach is calling this in a submit or button click event
const buttonClick = () => {
  const newEvents = [...events]; //This spreads every element inside the events array into a new one
  newEvents.push({
    title: eventTitleState, //You also need a useState for the title
    start: moment().toDate(),
    end: moment(),
  });
  setEvents(newEvents);
}

You can see this idea working here: https://codesandbox.io/s/green-cherry-xuon7

Answer 2

Your method of changing title is incorrect. Since it is array of objects, you will need to get to the specific object and then change the particular title. In your case replacing this code with yours helps in changing title of 0 index.

<input
      placeholder="Name"
      onChange={(e) =>{
        let tempArr = [...events];
        tempArr[0].title = e.target.value;
        setEvents(tempArr)
      }}
      required
    >

If you also want to add new objects, push it in tempArr on some event and update setEvents.