javascript - state中如何使用setState拼接成数组？

Question

我的 state.events 位于由组件实例组成的数组中:EventContainer。

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

我正在寻求帮助以对我的方法进行必要的调整，或者，如果我的整个方法都不好，我正在寻求有关如何解决此问题的建议。非常感谢。

我正在开发一个行程构建器，它由表示给定日期的事件的行/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>
      </>
    )
  }
}

我在setState中的目标是在index(pushNewEventContainerToState函数中的参数)之后立即将newEvent拼接到this.state.events中。

我遇到了这个错误，但我猜还有更多的事情发生:第 23:22 行:预期的赋值或函数调用，而是看到了一个表达式 no-unused-expressions。

Answer 1

我可以看到至少 2 个代码问题。 - Splice 将原地改变数组 - 你没有返回更新后的状态。

您可以改为使用 slice 来构建新数组。

pushNewEventContainerToState(index) {
  let newEvent = < EventContainer / > ;

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

      return {
        events: updatedEvents
      })
  })
}