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

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

Answer 1

我可以看到至少两个代码问题。 -拼接将改变阵列的位置 -您没有返回更新状态。

您可以改为使用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
      })
  })
}

Answer 2

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

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

设置

以state.events开头，而不是以空数组开头，我以一个 object 开头，其中包括一个以0开头的键，因为我一直希望用户从一个EventContainer开始。
关于pushNewEventContainerToState ，@ Sushanth提出了很好的建议。请在我的最新代码中直接引用该函数。我所做的改进与我将传递给this.state.events的EventContainer分开的方式有关。我已将EventContainer从pushNewEventContainerToState移至render（）元素。我给了它一个key = {item.key}的道具，并将组件实例包装在li中。第一个EventContainer的键为0（请参见state.events [0]）。现在，每个传递给state.events的新EventContainer都将具有一个基于state.events数组的最新.length（）的键（请参阅pushNewEventContainerToState中let newEvent变量的最新值）。

所有这些使我能够解决自己面临的一个大问题：我需要在EventContainer的索引调用pushNewEventContainerToState 之后立即将最新的EventContainer放入索引中。发生这种情况的主要原因是因为我没有正确地将索引传递给render（）内部的EventContainer。现在我已经有了实际的EventContainer，可以按正确的方式将其传递给prop（请在render中参考EventContainer的prop）。现在，我用正确的索引调用pushNewEventContainerToState。

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

2 个答案: