我如何在 object 中的数组中添加 object 作为属性 (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('')
  }

这就是我想要做的：我在输入和 select 标签中键入标题、自定义和 select 颜色。然后我提交它，然后函数将在 externalEvents(array) 中添加新的 object 我用 spread 来做到这一点，但不知何故它不起作用，控制台显示“类型错误：无法读取未定义的属性 '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

您的问题可能出在您的 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]
    })

更多信息请看这里：

根据之前的状态设置状态：

Answer 2

当你初始化你的状态时，它是一个带有键 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 3

我认为问题在于您将 state 定义为一个对象，其键 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}])
  ...
}

我如何在 object 中的数组中添加 object 作为属性 (react.js )

how can i add object in array which is in object as property (react.js )

javascript

fullcalendar

reactjs

进一步改进

我如何在 object 中的数组中添加 object 作为 属性 (react.js )

how can i add object in array which is in object as property (react.js )

javascript

fullcalendar

reactjs

进一步改进

我如何在 object 中的数组中添加 object 作为属性 (react.js )