Реагировать на замену массива объектов новым массивом объектов того же типа

Question

Итак, у меня есть массив состояния класса. Назовем его A. A заполняется объектами типа B через функцию f в конструкторе. Позже я с помощью f и новых данных создаю новый массив объектов типа B с именем C. Затем я использую setState ({A: C}). Однако это приводит к тому, что данные из первого массива остаются на дисплее. Я не уверен, как это вообще исправить.

Редактировать: фрагменты кода

class ClassBox extends Component {
constructor(props) {
    super(props);
    // note data here uses the keys from the config file
    this.state = {
        data: this.props.data,
        filteredData: [],
        functionData: []
    };
    this.generateFunctionData = this.generateFunctionData.bind(this);
    this.state.functionData = this.generateFunctionData();
    this.state.filteredData = this.state.functionData;
    this.handleSearch = this.handleSearch.bind(this);
}

generateFunctionData(useData = false, data = null){
   return useData ? ProcessJSON.extractFunctions(data.functions).map((_function, index) =>
   {return createMethodBox(_function.Func_name, _function.Description, _function.Access_Mod, index)}) : ProcessJSON.extractFunctions(this.props.data.functions).map((_function, index) =>
   {return createMethodBox(_function.Func_name, _function.Description, _function.Access_Mod, index)});
}

handleSearch(input) {
    // convert to lower case to avoid capitalization issues
    const inputLowerCase = input.toString().toLowerCase();
    // filter the list of files based on the input
    const matchingList = this.state.functionData.filter((method) => {
            return method.props.name.toLowerCase().includes(inputLowerCase)
        }
    );
    this.setState({
        filteredData: matchingList
    });
}

render() {
    console.log(this.state.filteredData)
    return (
        <Container>
            <NameContainer>
                <h1>{this.state.data.className}</h1>
            </NameContainer>
            <ContentContainer>
                <DescriptionContainer>
                    {this.state.data.description}
                </DescriptionContainer>
                <StyledDivider/>
                <VarContainer>
                    <h1>Variables</h1>
                    <VarTableContainer>
                        <BootstrapTable
                            keyField="id"
                            data={[]}
                            columns={testColumns}
                            bordered={false}
                            noDataIndication="Table is Empty"
                            classes="var-table"
                        />
                    </VarTableContainer>
                    {/*{this.state.data.variables}*/}
                </VarContainer>
                <StyledDivider/>
                <MethodContainer>
                    <MethodHeader>
                        <h1>Methods</h1>
                        <StyledSearchBar onSearch={this.handleSearch}
                                         isDynamic={true} allowEmptySearch={false} minChars={0}
                                         className='searchBar'/>
                    </MethodHeader>
                    <Methods>
                        {this.state.filteredData}
                    </Methods>
                </MethodContainer>
            </ContentContainer>
        </Container>
    );
}


class Classes extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: this.props.data,
        displayIndex: this.props.displayIndex
    };
    this.treeData = createTreeData(this.state.data);
    this.classBox = null
}

componentDidUpdate(prevProps, prevState, snapshot) {
    if(prevState.displayIndex !== this.props.displayIndex){
        const funcData = this.classBox.generateFunctionData(true, this.state.data[0][this.props.displayIndex]);
        console.log(funcData);
        this.classBox.setState({data: this.state.data[0][this.props.displayIndex], functionData: funcData, filteredData: funcData });
        this.classBox.forceUpdate();
        this.setState({displayIndex: this.props.displayIndex});
    }
}

render() {
    this.treeData = createTreeData(this.state.data);
    return (
        <Container>
            <FileTreeContainer>
                <StyledTreeMenu data={treeData}/>
            </FileTreeContainer>
            <ClassInfoContainer>
                <ClassBox ref = {el => this.classBox = el} data = {this.state.data[0][this.state.displayIndex]}/>
            </ClassInfoContainer>
        </Container>
    )
}

Классы содержат экземпляр ClassBox. После выполнения componentDidUpdate на странице все еще отображаются старые поля методов, даже если functionData изменилась.

РЕДАКТИРОВАТЬ 2: также стоит отметить, что когда я заменяю представление класса на представление приземления и возвращаюсь к представлению класса, оно показывает страницу правильно.

Answer 1

Способ установки состояния должен быть правильным, так как вы устанавливаете его для вновь созданного массива из .filter.

Я думаю, что проблема в том, что вы храните компоненты метода в состоянии фильтрованных данных. Компоненты не должны храниться в состоянии .

Я полагаю, что ваш компонент просто перерисовывает, но не удаляет старые сгенерированные компоненты. Возможно, попробуйте сопоставить входные данные поиска с состоянием и сгенерировать компоненты метода таким образом.