使用 React useState 更改 objects 的数组

Question

我有一个日历应用程序，它使用 objects:

数组呈现其事件

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

我正在尝试允许用户使用页面上的输入添加新事件。到目前为止，我只是想用这段代码更改事件的标题

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

当我 console.log(e.target.value) 时，它给出了我输入的内容，但 (events.title) 给出了未定义的内容。
我的最终目标是让用户使用以下格式的输入添加新事件。如果我走错了路，或者你知道更好的方法，我很乐意听到。

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
    }

  ])

提前谢谢你，我的完整代码是Here And here is a codesandbox: https://codesandbox.io/embed/gracious-minsky-pp1w5?codemirror=1

Answer 1

我认为 console.log 放错了地方，您不应该在数组赋值中调用该函数。即使你在下面调用它，setEvents 函数也不会给你标题，因为 useState 的 set 函数是异步的。另外我认为你没有正确地将事件分配到你的数组中。

这一行：

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

您正在将事件散布在一个新数组中，然后添加标题，留下类似于这样的结构：

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

并为输入中的每个更改嵌套此标题。

对于您想要实现的结构，您必须将一个新条目推送到一个已经包含您之前事件的数组中，然后更新状态。喜欢：

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

你可以在这里看到这个想法：https://codesandbox.io/s/green-cherry-xuon7

Answer 2

您更改标题的方法不正确。由于它是 object 的数组，您需要找到特定的 object，然后更改特定的标题。在您的情况下，用您的代码替换此代码有助于更改 0 索引的标题。

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

如果您还想添加新的 objects，请在某些事件上将其推送到 tempArr 并更新 setEvents。

使用 React useState 更改 objects 的数组

Changing an array of objects with React useState

javascript

arrays

reactjs

use-state