Question

背景：

我正在开发一个由行或名为EventContainers的组件实例组成的路线生成器，它们代表用户给定一天的活动。

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

值得注意的是，每个EventContainer都包含一个按钮，该按钮旨在使用户能够通过调用pushNewEventContainerToState onClick其他行/ EventContainer。

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

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

方法

我正在setState中使用.slice（），目的是这样做=>将最新的EventContainer放置在索引中紧接调用setstate的EventContainer之后。

问题

但是，我看到了三个问题：

a）仅第一个按钮NewEventButton实际上会调用setState。新的EventContainer上的按钮将无法执行任何操作。

b）穿过setState的EventContainer似乎是.pushed（）到state.events，而不是.sliced（），但是我不需要在数组的末尾。

c）当我检查Chrome devtools时，发现setStated设置为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>
        </>
    )
  }
}

Answer 1

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

[...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]。希望能解决此问题。

setState不是.slicing（）进入状态数组，这是我打算的方式

1 个答案: