javascript - 当组件不再由 render() 生成时，React 组件不会卸载

Question

当我使用 setState 将 this.state.rows 从 [a, b, c] 更改为 [d, e, f] 时，我得到的是 abcdef 而不是 de f。我无法理解这怎么可能。我已经用 firefox 的 react dev 插件确认状态正在正确更新，并且 a、b、c 被 d、e、f 替换。任何关于从哪里开始故障排除的建议都会有所帮助。我完全不知所措，无法在任何地方找到任何导致旧渲染结果无法卸载的错误的文档。

getFilter(newFilters){
    let newFilter = Object.assign({}, this.state.filter, newFilters);
    this.setState({filter: newFilter});
}

// eslint-disable-next-line no-unused-vars
componentDidUpdate(prevProps, prevState){
    if(Object.keys(diff(this.props.filter || {}, prevProps.filter || {})).length !== 0){
        this.setState({filter: Object.assign({}, this.state.filter, this.props.filter)});
    }
    else if(Object.keys(diff(this.props.rows || {}, prevProps.rows || {})).length !== 0){  // cleaning incomming rows
        console.log(diff(this.props.rows || {}, prevProps.rows || {}));
        let newState = {};
        newState["header"] = this.props.schema;
        const headerKeys = Object.keys(this.props.schema);
        let rows = [];
        let emptyCounter = {};
        this.props.rows.forEach(row=>{
            if(Object.keys(row).length > 0){
                let cleanRow = [];
                const rowKeys = Object.keys(row);
                headerKeys.forEach(headerKey=>{
                    let value = "";
                    if(rowKeys.includes(headerKey)){
                        value = row[headerKey].value;
                        if(typeof(value) == "string"){
                            value = value.trim();
                        }
                    }
                    if(!value){
                        emptyCounter[headerKey] = ((emptyCounter[headerKey] || 0) + 1);
                    }
                    let newCell = Object.assign({}, this.props.schema[headerKey]);
                    newCell["value"] = value;
                    newCell["key"] = headerKey;
                    cleanRow.push(newCell);
                });
                rows.push(cleanRow);
            }
        });
        Object.keys(emptyCounter).forEach(key=>{
            if(emptyCounter[key] == rows.length){
                rows = rows.map(row=>{
                    let newRow = row.filter(cell=>cell.key !== key);
                    return newRow;
                });
                delete newState["header"][key];
            }
        });
        newState["rows"] = rows;
        this.setState(newState);
    }
    else if(Object.keys(diff(this.state.filter || {}, prevState.filter || {})).length !== 0){
        this.props.updateTable(this.state.filter);
    }
}

getRows(){
    console.log(this.state.rows.length)
    return this.state.rows.map(row=>{
        return <TableRow onRowClick={this.props.onRowClick} key={row[0]["value"]} row={row}></TableRow>;
    });
}

render(){
    if(this.state.rows && this.state.header){
        return(
            <div>
                {typeof this.props.count === "number" && "Returned " + this.props.count + " records."}
                <table className="table table-striped">
                    <TableHeader updateFilter={this.getFilter} key="header" header={this.state.header}></TableHeader>
                    {this.getRows()}
                </table>
                <Paginator 
                    page={this.state.page} 
                    count={this.props.count} 
                    changePage={this.props.changePage} 
                    perPage={this.state.perPage}
                    offset={this.props.offset}
                ></Paginator>
            </div>
        );
    }
    else{
        return null;
    }
}

编辑：要求包含更多代码。对不起乱七八糟

标签： javascriptreactjs