Reactjs 将state not.slicing（）设置为状态'；s按I'的方式排列；我打算

背景：

我正在开发一个行程生成器，它由行或名为EventContainers的组件实例组成，这些行或组件实例表示用户给定日期的活动

如下所示，该类在state.events中有一个数组，该数组在pushNewEventContainerState函数中从setState接受EventContainers

需要注意的是，每个EventContainer都包含一个按钮，用于让用户能够通过调用PushNewEventContainerState再次单击其他行/EventContainer

同一按钮还作为其自己的组件实例（名为NewEventButton）列出，并显示在任何EventContainers之前

任何设置为state.events的EventContainer都应该放在调用setState的EventContainer之后的索引中，而不是放在开头或结尾

方法

我在setState中使用.slice（）的目的就是要这样做=>将最新的EventContainer放在调用setState的EventContainer之后的索引中

问题

然而，我看到了三个问题：

a） 只有第一个按钮NewEventButton实际调用setState。新EventContainer上的按钮不会起任何作用

b） 通过setState传递的EventContainer似乎是.push（）到state.events，而不是.sliced（），但我不需要在数组末尾使用它们

c） 当我检查ChromeDevTools时，我看到任何设置为state.events的EventContainer都是未定义的

我尝试过的

我尝试将两种不同的道具直接放入PushNewEventContainerState内的EventContainer中：

1. The first prop I tried didn't do anything -> onClick={() => this.pushNewEventContainerToState(index)

2. The second prop I tried was the same as the first except, instead of onClick, I named it pushNewEventContainerToState. This got the button on new EventContainers working but the EventContainers seemed to again be .pushed() instead of .sliced the way I need them to be. Chrome devtools will then show this is defined but I don't see a bound like I do for the first NewEventButton.

非常感谢您的关注

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 updatedEvents = [...prevState.events.slice(0, index), newEvent, ...prevState.events.slice(index + 1)];

            return {
              events: updatedEvents
            };
        })
      }

  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 updateEvents=[…prevState.events.slice（0，索引），newEvent，…prevState.events.slice（索引+1）]；
返回{
事件：UpdateEvents
};
})
}
render（）{
返回(

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

)
}
}

首先尝试修复函数的这一部分，看起来它的行为不符合预期：

[...prevState.events.slice(0, index), newEvent, ...prevState.events.slice(index + 1)]

改为：

[...prevState.events.slice(0, index), newEvent, ...prevState.events.slice(index)]

.slice（）的第二个参数告诉它停止，但不包括元素的索引。因此，如果示例中有[1,2,3].slice（0,1），则只会得到第一个元素->[1]。

---

希望这能解决问题。

为什么不使用二维数组？你能用Codesandbox或其他方法将其放入一个可复制的演示中吗？谢谢你，我会在解决kbo的建议后立即查看这些。谢谢@kbo，我仍然对EventContainer存在问题。我现在正在推进，但我的进度更好。我们将仔细研究切片问题。