Question

我有一个已编写的组件（它是一个列表）。更新组件（更改此列表）后，onclick事件不会更新，并传递与呈现组件之前相同的值。有没有办法强迫React从头开始更新整个div？变量“ value.edit_title_normal”确实发生了变化，只是onclick事件没有变化。

*为了简洁起见，我删除了一些多余的代码*

class SearchResults extends React.PureComponent {
    //Code to show the detailed information
    render() {
        //Individual record
        const startItem = (this.props.itemsPerPage * this.props.page) - this.props.itemsPerPage;
        const endItem = startItem + this.props.itemsPerPage;
        //Slice is from/to
        let all = searchableDatabase.slice(startItem, endItem).map((value, index) => {
            return (
                <div onClick={(e) => this.showDetailedInfo(index, e)} > // <== This bit here is not updating when  re-rendered
                    {value.edit_title_normal}
                </div>
            )
        });

        //Main container
        return (
            <div>
                <div>
                    <Pagination allLength={searchableDatabase.length} page={this.props.page} itemsPerPage={this.props.itemsPerPage} />
                </div>

                <div>
                    {all}
                </div>
            </div>
        );
    }
}

Answer 1

您误诊了问题。 map回调中的索引始终从零开始，因此不可能永远更改为其他内容。您正在对从原始切片中切出的新数组进行操作，而map方法不知道或不在乎原始数组的索引。

我假设您希望索引从startItem而不是0开始。然后，您必须手动将其添加到索引：

<div onClick={(e) => this.showDetailedInfo(index + startItem, e)} >

反应：强制完全更新组件

1 个答案: