react做todolist, 选中radio删除该条list,导致紧跟的radio被选中

Question

问题描述

react编写todolist,使用radio进行删除，删除一条后导致紧跟的raido被选中。
代码效果：

选中“学习”进行删除后，紧跟的“读书”也被选中了

相关代码

粘贴代码文本（请勿用截图）

class Lists extends React.Component {
    handleClick(index) {
        this.props.deleteTask(index) // 父级组件进行删除
    }

    render() {
        const {tasks} = this.props
        const taskItems = tasks.map((item, key) => 
            <li key={key}>
                <input type="radio" onClick={this.handleClick.bind(this, key)} />
                {item.name}
            </li>)
        return (
            <ul>{taskItems}</ul>
        )
    }
}

Answer 1

这是新手经常犯的一个错误，程序中应该尽量避免不要将map中的遍历下标数（key）作为React Dom的key值来使用。

因为当你选中了“学习”之后，key=1的这个Dom中的Radio置为了选中状态。

而当你把“学习”删除了之后，排在学习之后的“读书”的key值变成了1，此时react比较key=1时，发现只要更新Radio的选中状态即可，所以维持了原来“学习”选中时的状态，也就是将“读书”的Raido置为了选中。