Question

我正在使用Preact（用于所有意图和目的，React）来呈现项目列表，保存在状态数组中。每个项目旁边都有一个删除按钮。我的问题是：当点击按钮时，删除了正确的项目（我已经多次验证），但是项目会在最后项目丢失的情况下重新呈现，而删除的项目仍在那里。我的代码（简化）：

import { h, Component } from 'preact';
import Package from './package';

export default class Packages extends Component {
  constructor(props) {
    super(props);
    let packages = [
      'a',
      'b',
      'c',
      'd',
      'e'
    ];
    this.setState({packages: packages});
  }

  render () {
    let packages = this.state.packages.map((tracking, i) => {
      return (
        <div className="package" key={i}>
          <button onClick={this.removePackage.bind(this, tracking)}>X</button>
          <Package tracking={tracking} />
        </div>
      );
    });
    return(
      <div>
        <div className="title">Packages</div>
        <div className="packages">{packages}</div>
      </div>
    );
  }

  removePackage(tracking) {
    this.setState({packages: this.state.packages.filter(e => e !== tracking)});
  }
}

我做错了什么？我需要以某种方式主动重新渲染吗？这是一个n + 1案件吗？

澄清：我的问题不在于国家的同步性。在上面的列表中，如果我选择删除“c”，则状态会正确更新为['a','b','d','e']，但呈现的组件为['a','b','c','d']。每次调用removePackage时，都会从数组中删除正确的状态，显示正确的状态，但会显示错误的列表。（我删除了console.log语句，因此它们似乎不是我的问题。

Answer 1

这是一个经典问题，Preact的文档完全没有提供，所以我想亲自为此道歉！如果有人有兴趣，我们一直在寻找帮助撰写更好的文档。

这里发生的事情是您使用数组的索引作为键（在渲染中的地图中）。这实际上只是模拟了VDOM diff在默认情况下的工作方式 - 键始终是0-n，其中n是数组长度，因此删除任何项只会将最后一个键从列表中删除。

说明：键超越渲染

在您的示例中，想象一下（虚拟）DOM在初始渲染中的外观，然后在删除项目＆＃34; b＆＃34; （索引3）。下面，我们假设您的列表只有3个项目（['a', 'b', 'c']）：

这是初始渲染产生的内容：

<div>
  <div className="title">Packages</div>
  <div className="packages">
    <div className="package" key={0}>
      <button>X</button>
      <Package tracking="a" />
    </div>
    <div className="package" key={1}>
      <button>X</button>
      <Package tracking="b" />
    </div>
    <div className="package" key={2}>
      <button>X</button>
      <Package tracking="c" />
    </div>
  </div>
</div>

现在点击＆＃34; X＆＃34;在列表中的第二项上，＆＃34; b＆＃34;传递给removePackage()，将state.packages设置为['a', 'c']。这会触发我们的渲染，它会生成以下（虚拟）DOM：

<div>
  <div className="title">Packages</div>
  <div className="packages">
    <div className="package" key={0}>
      <button>X</button>
      <Package tracking="a" />
    </div>
    <div className="package" key={1}>
      <button>X</button>
      <Package tracking="c" />
    </div>
  </div>
</div>

由于VDOM库只知道你在每次渲染时给出的新结构（而不是如何从旧结构改为新结构），因此键所做的基本上是告诉它项目0和1保留在原位 - 我们知道这是不正确的，因为我们希望删除索引1处的项目。

请记住：key优先于默认的子差异重新排序语义。在此示例中，因为key始终只是基于0的数组索引，所以最后一项（key=2）才会被删除，因为它是后续渲染中缺失的那一项。

修复

因此，要修复您的示例 - 您应该使用标识项而不是 offset 作为键的内容。这可以是项本身（任何值都可以作为键）或.id属性（首选，因为它避免散布对象引用，可以阻止GC）：

let packages = this.state.packages.map((tracking, i) => {
  return (
                                  // ↙️ a better key fixes it :)
    <div className="package" key={tracking}>
      <button onClick={this.removePackage.bind(this, tracking)}>X</button>
      <Package tracking={tracking} />
    </div>
  );
});

哇，这是我原本想要的那种啰嗦。

TL，DR：从不使用数组索引（迭代索引）作为key。它充其量只是模仿默认行为（自上而下的子重新排序），但更多时候只是将所有差异推到最后一个孩子身上。

编辑 @tommy recommended这个优秀的link to the eslint-plugin-react docs，它比我上面的解释更好。

Preact

1 个答案:

说明：键超越渲染

修复