Javascript 如何使用setState拼接到状态为的数组中？

My state.events位于由组件实例EventContainer组成的数组中

我希望我的setState在state.events数组中放置一个新的EventContainer。但是，我希望EventContainer在发出setState调用的特定EventContainer之后立即进入索引

我正在寻求帮助，以便对我的方法进行必要的调整，或者，如果我的整个方法都不好，那么就如何进行这项工作提出建议。多谢各位

我正在开发一个由行/事件容器组成的行程生成器，这些行/事件容器表示给定日期的活动

每个EventContainer都有一个按钮，该按钮需要为用户提供在该EventContainer之后立即单击另一行的功能

class DayContainer extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      events: [],

    };

    this.pushNewEventContainerToState = this.pushNewEventContainerToState.bind(this);
  }




    pushNewEventContainerToState (index){
       let newEvent = <EventContainer />;
       this.setState(prevState => {
         const events = prevState.events.map((item, j) => {
           if (j === index) {
             events: [...prevState.events.splice(index, 0, newEvent)]
            }
          })
        })
      }




  render(){
    return (
        <>
          <div>
              <ul>
                  {
                    this.state.events === null
                    ? <EventContainer pushNewEventContainerToState= . 
 {this.pushNewEventContainerToState} />
                    : <NewEventButton pushNewEventContainerToState={this.pushNewEventContainerToState} />
                  }




                  {this.state.events.map((item, index) => (
                    <li
                        key={item}
                        onClick={() => 
 this.pushNewEventContainerToState(index)}
                    >{item}</li>
                  ))}

              </ul>

        </div>
      </>
    )
  }
}

类DayContainer扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
事件：[]，
};
this.pushNewEventContainerState=this.pushNewEventContainerState.bind（this）；
}
PushNewEventContainerState（索引）{
设newEvent=；
this.setState（prevState=>{
const events=prevState.events.map（（项，j）=>{
如果（j==索引）{
事件：[…prevState.events.splice（索引，0，newEvent）]
}
})
})
}
render（）{
返回(

{
this.state.events==null
? 
: 
}
{this.state.events.map（（项，索引）=>(

this.pushNewEventContainerState（索引）}
>{item}
))}

)
}
}

我在setState中的目标是在索引（PushNewEventContainerState函数中的参数）之后立即将newEvent拼接到this.state.events中

---

我得到了这个错误，但我猜不仅仅是这样：第23:22行：预期是赋值或函数调用，而是看到了一个表达式没有未使用的表达式。

我可以看到代码中至少有两个问题。 -拼接将在适当位置对阵列进行变异 -您没有返回更新的状态

您可以改为使用

slice

构建新阵列

pushNewEventContainerState（索引）{
让newEvent=；
this.setState（prevState=>{
const updateEvents=[…prevState.events.slice（0，索引），newEvent，…prevState.events.slice（索引+1]；
返回{
事件：UpdateEvents
})
})
}

由于我对编码相当陌生，我花了一段时间，但我能够编译出完整的答案。下面是代码。下面，我逐一解释问题所在，以及更新后的代码是如何解决的

class DayContainer extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      events: [{key:0}],

    };

    this.pushNewEventContainerToState = this.pushNewEventContainerToState.bind(this);
  }


      pushNewEventContainerToState(index) {
        let newEvent = {key: this.state.events.length};

        this.setState(prevState => {
          let updatedEvents = [...prevState.events.slice(0, index + 1), newEvent, ...prevState.events.slice(index + 1)];

            return {
              events: updatedEvents
            };
          })
        }

  render(){
    return (
        <>
          <div>
              <ul>
                  {this.state.events.map((item, index) => (
                    <li key={item.key}>
                        < EventContainer pushNewEventContainerToState={() => this.pushNewEventContainerToState(index) } / >
                    </li>
                  ))}

              </ul>
          </div>
        </>
    )
  }
}

类DayContainer扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
事件：[{key:0}]，
};
this.pushNewEventContainerState=this.pushNewEventContainerState.bind（this）；
}
PushNewEventContainerState（索引）{
让newEvent={key:this.state.events.length}；
this.setState（prevState=>{
让UpdateEvents=[…prevState.events.slice（0，索引+1），newEvent，…prevState.events.slice（索引+1）]；
返回{
事件：UpdateEvents
};
})
}
render（）{
返回(

{this.state.events.map（（项，索引）=>(

this.pushNewEventContainerState（index）}/>

))}

)
}
}

设置

从state.events开始，而不是从空数组开始，我从一个对象开始，包括一个从0开始的键，因为我总是希望用户从一个EventContainer开始

class DayContainer extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      events: [],

    };

    this.pushNewEventContainerToState = this.pushNewEventContainerToState.bind(this);
  }




    pushNewEventContainerToState (index){
       let newEvent = <EventContainer />;
       this.setState(prevState => {
         const events = prevState.events.map((item, j) => {
           if (j === index) {
             events: [...prevState.events.splice(index, 0, newEvent)]
            }
          })
        })
      }




  render(){
    return (
        <>
          <div>
              <ul>
                  {
                    this.state.events === null
                    ? <EventContainer pushNewEventContainerToState= . 
 {this.pushNewEventContainerToState} />
                    : <NewEventButton pushNewEventContainerToState={this.pushNewEventContainerToState} />
                  }




                  {this.state.events.map((item, index) => (
                    <li
                        key={item}
                        onClick={() => 
 this.pushNewEventContainerToState(index)}
                    >{item}</li>
                  ))}

              </ul>

        </div>
      </>
    )
  }
}

关于PushNewEventContainerState，@Sushanth提出了一个很好的建议。请在我的最新代码中直接参考该函数。我所做的改进与我将传递给this.state.events的EventContainer分离的方式有关。我已将EventContainer从PushNewEventContainerState向下移动到render（）元素。我给了它一个key={item.key}属性，并将组件实例包装在一个li中。第一个EventContainer的键为0（请参见state.events[0]）。现在，传递给state.events的每个新EventContainer都将有一个基于state.events数组的最新.length（）的键（请参阅PushNewEventContainerState中let newEvent变量的最新值）

---

所有这些都让我解决了我面临的一个大问题：我需要将最新的EventContainer放在调用PushNewEventContainerState的EventContainer索引之后的索引中。发生这种情况的主要原因是我没有正确地将索引传递到render（）中的EventContainer.现在我已经有了实际的EventContainer，我可以以正确的方式传递它一个道具（请在render中参考EventContainer的道具）现在我用正确的索引调用PuxEngEngEngulttoToCurror。< /P>不应该在SETSTATE回调函数中添加返回语句吗？也可以考虑使用切片而不是剪接。将尝试切片。因此，如果在事件之前添加返回，则会出现一个错误，表示它期望在分号之后使用分号。events@VictorFranco如果答案有帮助如果您解决了发布的问题，请将其标记为答案，以便对其他人也有帮助。对不起，我是这里的新手。完成！