javascript - React 卸载子组件的方式是什么?
问题描述
我是 React 的新手,但是当我学习 componentWillUnmount() 方法时,我发现了一种我无法理解的行为。
考虑这个脚本(这里是小提琴-> https://jsfiddle.net/ockhamsblade/4zf5tq2h/37/):
let myArray = [1,2,3,4,5,6];
class List extends React.Component {
constructor() {
super()
this.state = {
list: []
};
}
componentDidMount() {
this.setState({list:myArray});
}
render() {
return (
<div>
<h1>My list</h1>
<ul>
{
this.state.list.map((item, index) => (
<Item key={index} value={item} onDeleteItem={this.handleDelete}>Item {item}</Item>
))
}
</ul>
</div>
)
}
handleDelete = (value) => {
console.log("Original list: ", this.state.list);
console.log("Handling delete of item " + value);
let newState = {...this.state};
newState.list = newState.list.filter((v) => v !== value);
console.log("New list: ", newState.list);
this.setState(newState);
}
}
class Item extends React.Component {
render() {
return (<li><button type="button" onClick={this.delete}>Item {this.props.value}</button></li>);
}
delete = () => {
console.log('Please remove item ' + this.props.value);
this.props.onDeleteItem(this.props.value);
}
componentWillUnmount() {
console.log("Unmounting item " + this.props.value);
}
}
ReactDOM.render(<List />, document.querySelector("#app"))
正如您可以检查 JSFiddle.net 脚本(使用开发人员的控制台)一样,每当您单击一个项目时,List 组件都会从其状态中删除该值并重新呈现剩余的项目。到现在为止还挺好。问题是,在卸载之前,Item 组件始终具有最后一个 item 的 props,例如,如果这些将被覆盖或其他情况(您可以在开发人员的控制台中查看这一点)。所以,即使我要删除项目#3(或任何一个),componentWillUnmount() 上的“this.props.value”总是 = 6,而我期望 = 3。
我猜想,无论出于何种性能原因,React 都会从 DOM 中删除最后一项并重新渲染其余项。这种行为是预期的吗?如果是这样,您能否参考一些文档和/或告诉我如何在卸载之前保留该项目的原始实例?我试图将 props.value 存储在项目状态上,但也不起作用。
提前致谢。
解决方案
你得到这个的原因是因为你将数组的索引作为键传递。相反,如果您传递一个有效的唯一标识符,则不会发生这种情况。
请运行此代码,您将理解。
let myArray = [1,2,3,4,5,6];
class List extends React.Component {
constructor() {
super()
this.state = {
list: []
};
}
componentDidMount() {
this.setState({list:myArray});
}
render() {
return (
<div>
<h1>My list</h1>
<ul>
{
this.state.list.map((item, index) => (
<Item key={`${item}`} value={item} onDeleteItem={this.handleDelete}>Item {item}</Item>
))
}
</ul>
</div>
)
}
handleDelete = (value) => {
console.log("Original list: ", this.state.list);
console.log("Handling delete of item " + value);
let newState = {...this.state};
newState.list = newState.list.filter((v) => v !== value);
console.log("New list: ", newState.list);
this.setState(newState);
}
}
class Item extends React.Component {
render() {
return (<li><button type="button" onClick={this.delete}>Item {this.props.value}</button></li>);
}
delete = () => {
console.log('Please remove item ' + this.props.value);
this.props.onDeleteItem(this.props.value);
}
componentDidUpdate(){
console.log("incdu",this.props.value);
}
componentWillUnmount() {
console.log("Unmounting item " + this.props.value);
}
}
ReactDOM.render(<List />, document.querySelector("#app"))
我在这里所做的唯一更改是将正确的标识符(这里是项目本身)作为键传递。
<Item key={`${item}`} value={item} onDeleteItem={this.handleDelete}>Item {item}</Item>
你可以参考Understanding unique keys for array children in React.js
推荐阅读
- python - 从 lxml 中的属性获取本地名称
- reactjs - 何时使用原生 React.useReducer Hook 以及它与 Redux 的区别
- angular - api 服务在 observable 中变得未定义
- java - 在 Laravel 中使用 rest api 后如何打开链接?
- elasticsearch - elasticsearch范围聚合是否包括在内
- ruby - 布尔选项的Ruby OptionParser短代码?
- cx-oracle - 在 ml-engine 中使用 cx_oracle 导致“无法加载 Oracle 客户端库”
- python - 如何使 __main__ 同时成为一个包-OR-脚本和一个包子模块
- c# - 实体框架/SQL - 可空列“不能设置为‘空’值”
- javascript - React + Typescript 高阶函数“不可分配给类型”错误