状态下如何使用setState拼接成数组？

Question

我的 state.events 在由组件实例组成的数组中：EventContainer。

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

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

我正在开发一个行程构建器，它由代表特定日期的活动的行/EventContainers 组成。

每个 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 中的目标是在索引之后立即将 newEvent 拼接到 this.state.events 中（pushNewEventContainerToState 函数中的参数）。

我收到了这个错误，但我猜还有比这更多的原因：第 23:22 行：期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions。

Answer 1

由于我对编码还很陌生，所以我花了一些时间，但我能够编译出完整的答案。这是代码，如下。在此之下，我将逐点解释问题所在以及更新后的代码如何解决该问题。

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

设置

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

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

   李>

所有这些让我解决了我面临的一个大问题：我需要在调用 pushNewEventContainerToState 的 EventContainer 的索引之后立即将最新的 EventContainer 放入索引中。发生这种情况的主要原因是我没有正确地将索引传递给 render() 内部的 EventContainer。现在我已经有了实际的 EventContainer，我可以以正确的方式向它传递一个道具（请参阅渲染中的 EventContainer 的道具）。现在我用正确的索引调用 pushNewEventContainerToState。

Answer 2

我可以看到代码至少有 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
      })
  })
}