javascript - 按钮删除列表项并更改其排序 | react

Question

我有一个按钮，按下它时应该会切换列表中的更多项目。我在构造函数中设置了默认状态:

constructor(props) {
  super(props)
  this.state = {
    showCount: 10,
    expanded: false
  }
}

因此列表中的默认项目数将为 10，并且不会展开。然后我创建了一个应该更改状态并加载更多列表项的函数:

loadMore() {
  const { showCount } = this.state
  const { events } = this.props
  showCount === 10
    ? this.setState({ showCount: events.reverse().length, expanded: true })
    : this.setState({ showCount: 10, expanded: false })
}

并创建了一个“按钮”，如果 expanded 状态为 true 或 false，则应该更改其文本:

const toggleMore = (
  <div className="text-center">
    <a className="show-more" onClick={() => this.loadMore()}>
      {this.state.expanded ? (
        <span>Visa mindre</span>
      ) : (
        <span>Visa mer</span>
      )}
    </a>
  </div>
)

然后是使用 .slice 和 showCount 变量的列表项组件:

const mappedEvents =
  events.length === 0 ? (
    <p style={{ textAlign: 'center' }}>No events</p>
  ) : (
    events
      .reverse()
      .slice(0, this.state.showCount)
      .map((event, i) => {
        return (
          <div>
            <EventItem
              key={i}
              ...
            />
          </div>
        )
      })
  )

我的问题

所以这个按钮在我第一次使用时效果很好。如果我进入我的页面，我可以看到所有 10 个列表项，并且按下按钮时文本会发生变化。 但是当我第二次按下它时(当expanded: true)时，我的所有列表项都消失。当我第三次按下它时，列表项的顺序发生了变化，这意味着 .revers() 显然不再起作用了。当我第四次按下它时，它会回到第一阶段； 10 个列表项，顺序是应有的。之后就一直重复。

所以我只想知道我在这里做错了什么以及为什么按钮会这样。

感谢您的阅读!

Answer 1

基本问题是 events.reverse() 具有破坏性，它实际上改变了原始数组，它不只是返回一个新的反转数组。这个数组来自 props，这也是一个问题——你绝对不应该修改来自 props 的东西，你不知道父组件稍后是否会用新数组覆盖它。

此外，如果您在渲染期间使用reverse()，请记住渲染可能会比您意识到的运行更多次。每次渲染时，它都会再次反转数组。

我在这里建议只在渲染期间执行数组转换，并以非破坏性的方式进行操作。获取新的反转数组的一种方法是首先使用切片制作副本，然后反转它，如下所示:

const reversed = events.slice().reverse();

我还注意到您正在使用 events.reverse().length - 大概这与 events.length 相同，您需要在这里改变数组吗？