我使用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案例吗?
Clarification:我的问题不是状态的同步性。在上面的列表中,如果我选择删除'c',状态将正确更新为['a','b','d','e']
,但呈现的组件是['a','b','c','d']
。每次调用removePackage
时,都会从数组中删除正确的一个,显示正确的状态,但会呈现一个错误的列表。(我删除了console.log
语句,所以看起来它们不是我的问题)。
发布于 2017-03-14 08:08:22
这是一个典型的问题,Preact的文档完全没有提供足够的服务,所以我想亲自为此道歉!如果有人感兴趣,我们一直在寻求帮助编写更好的文档。
这里发生的情况是,您正在使用数组的索引作为键(在渲染内的贴图中)。这实际上只是模拟了VDOM diff在默认情况下的工作方式-键始终是0-n
,其中n
是数组长度,因此删除任何项只会将最后一个键从列表中删除。
说明:关键点超越渲染
在您的示例中,想象一下(虚拟) DOM在初始呈现时的样子,然后在删除项"b“(索引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>
现在,当我们在列表中的第二项上单击"X“时,"b”被传递给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
优先于默认子diff重新排序语义。在本例中,因为key
总是从0开始的数组索引,所以最后一项(key=2
)会被删除,因为它是后续呈现中缺少的一项。
解决之道
因此,为了修正你的例子--你应该使用一些标识项目的东西,而不是它的偏移量作为你的键。这可以是项本身(可以接受任何值作为键),也可以是.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,它比我上面做的更好地解释它。
https://stackoverflow.com/questions/42773892
复制相似问题