背景：
我正在开发一个行程生成器，它由行或名为 EventContainers 的组件实例组成，这些行或组件实例表示用户给定日期的活动。
该类(如下所示)在state.events中有一个数组，该数组接受来自pushNewEventContainerToState函数中setState的EventContainers。
值得注意的是，每个 EventContainer 都包含一个按钮，旨在使用户能够通过调用 pushNewEventContainerToState 来单击其他行/事件容器。
同一按钮也作为其自己的组件实例列出，名为 NewEventButton，并显示在任何 EventContainer 之前。
任何 setStated to state.events 的 EventContainer 都应该放在调用 setState 的事件容器之后的索引中，而不是放在开头或结尾。
方法
我在setState中使用.slice()，目的是这样做=>将最新的EventContainer放在索引中，紧跟在调用setstate的事件容器之后。
问题
但是，我看到三个问题：
a) 只有第一个按钮 NewEventButton 才会真正调用 setState。新事件容器上的按钮不会做任何事情。
b) 通过 setState 传递的 EventContainers 似乎是 .pushed() 到 state.events，而不是 .sliced()，但我不需要它们在数组的末尾。
c) 当我检查 Chrome devtools 时，我看到任何 setStated to state.events 的 EventContainer 都是未定义的。
我尝试过什么
我尝试将两种不同类型的道具直接放入 pushNewEventContainerToState 中的 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>
</>
)
}
}
首先尝试修复函数的这一部分，看起来它的行为不符合预期：
[...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]。 希望能解决问题。