我如何在数组中添加对象作为属性（react.js）

Question

首先，对于令人困惑的标题，我们深表歉意。我找不到更清楚的表达方式。

这些天来，我正在处理自己的项目并面临一个问题。如果你能给我一些 建议，对我有很大帮助。

所以，这就是我的国家

const[state, setState] = useState({
    externalEvents: [
      { title: "Art 1", color: "#0097a7", id: 34432, custom: "fdsfdsfds" },
      { title: "Art 2", color: "#f44336", id: 323232 },
      { title: "Art 3", color: "#f57f17", id: 1111 },
      { title: "Art 4", color: "#90a4ae", id: 432432 },
     
      
    ]
  });

这是我的输入标签和功能

  <form className="todoinput"  onSubmit={addTodo} >
    <input type="text" value={title} onChange={e=>setTitle(e.target.value)} placeholder="Add event" />
    <input type="text" value={custom} onChange={e=>setCustom(e.target.value)} placeholder="detail" />
    <select>
      <option value={()=>{setColor('blue')}}>blue</option>
      <option value={()=>{setColor('orange')}}>orange</option>
      <option value={()=>{setColor('green')}}>green</option>
      <option value={()=>{setColor('purple')}}>purple</option>
    </select>
    <button  type="submit">Add todo</button>
  </form>


const addTodo = (e) =>{
    e.preventDefault();
    setState([...state.externalEvents,{title:{title}, color: {color}, custom: {custom}}])
    setTitle('')
    setCustom('')
  }

这就是我想做的：我在输入中输入标题、自定义并选择颜色并选择标签。然后我提交它，然后函数将在 externalEvents(array) 中添加新对象 我使用 spread 来做到这一点，但不知何故它不起作用，控制台说“TypeError：无法读取未定义的属性'map'”

 <div id="external-events">
          {state.externalEvents.map((event) => (
           <div 
           className="fc-event"
           title={event.title}
           data-id={event.id}
           data-color={event.color}
           data-custom={event.custom}
           key={event.id}
           style={{
             backgroundColor: event.color,
             borderColor: event.color,
             cursor: "pointer"
           }}
           >{event.title}</div>
            ))}
      </div>

这是 map() 发生的部分，我认为 map 无法读取属性的原因是因为 我未能向 externalEvents 发送正确的属性。

感谢您的阅读，我们将不胜感激。

p.s 我使用了 FullCalendar 库！

Answer 1

当你初始化你的状态时，它是一个带有键 externalEvents 的对象，它是一个数组

useState({
    externalEvents: [
      { title: "Art 1", color: "#0097a7", id: 34432, custom: "fdsfdsfds" },
      { title: "Art 2", color: "#f44336", id: 323232 },
      { title: "Art 3", color: "#f57f17", id: 1111 },
      { title: "Art 4", color: "#90a4ae", id: 432432 },  
    ]
  })

但是当你更新你的状态时，它是一个数组

setState([...state.externalEvents,{title:{title}, color: {color}, custom: {custom}}])

所以根据你的初始状态，setState 应该如下

setState({
  ...state, 
  externalEvents: [
    ...state.externalEvents, 
    {title, color, custom}
  ]})

请注意{title, color, custom} 可能是您想要的，而不是{title: {title}, xxxx

Answer 2

您的问题可能在您的 addTodo 函数内部。

此函数将state 设置为一个数组。此后，state.externalEvents 不再存在。 要对此进行测试，请在 addTodo 函数中设置后尝试 console.log(state)。

根据您的意图，这里是您的 addTodo 函数的修改，可能会解决您的问题：

const addTodo = (e) =>{
    e.preventDefault();

    // Use previous state, and make sure to return an object with an 'externalEvents' key as the new state
    setState((prevState) => {
        const newEvent = {} // whatever your new event is
        return { externalEvents: [...prevState.externalEvents, newEvent] }

    })
    setTitle('')
    setCustom('')
}

进一步改进

此外，您可以通过直接拥有一个externalEvents 状态使事情变得更简单，从而无需在其他状态对象中嵌套externalEvents 属性。

例如：

const [externalEvents, setExternalEvents] = useState([
      { title: "Art 1", color: "#0097a7", id: 34432, custom: "fdsfdsfds" },
      { title: "Art 2", color: "#f44336", id: 323232 },
      { title: "Art 3", color: "#f57f17", id: 1111 },
      { title: "Art 4", color: "#90a4ae", id: 432432 } 
    ])

如果您采用此方法，则需要再次更新您的 addTodo 函数，特别是状态更新步骤。

您的状态更新步骤现在将如下所示：

setExternalEvents((prevExternalEvents) => {
        const newEvent = {} // whatever your new event is
        return [...prevExternalEvents, newEvent]
    })

查看这里了解更多：

1. 根据之前的状态设置状态：useState hook, setState function. Accessing previous state value

Answer 3

我认为问题在于您将状态定义为一个对象，键为 externalEvents，它是一个数组。但是当你提交表单时，在 setState 函数中，你设置的是一个数组，而不是原来的形状。

我建议你这样做：

const [externalEvents, setExternalEvents] = useState([
  { title: "Art 1", color: "#0097a7", id: 34432, custom: "foo" },
  { title: "Art 2", color: "#f44336", id: 323232 },
  { title: "Art 3", color: "#f57f17", id: 1111 },
  { title: "Art 4", color: "#90a4ae", id: 432432 },
]);

形式如下：

const addTodo = (e) => {
  ...
  setExternalEvents(prev => [...prev, {title, color, custom}])
  ...
}