Держите раскрывающийся список открытым после перерисовки

Question

У меня есть три компонента, один на основе класса (AdmControls) и два функциональных (listarProdutos и listarProdutosItens). Они несут ответственность за отображение списка, полученного из Firebase.

Каждый элемент может быть удален после щелчка, функция, отвечающая за него, - excluirItemHandler и находится в listarProdutosItens.

Кроме того, что список представляет собой выпадающий список с двумя уровнями, у меня есть h1 тег в listarProdutos, и когда я нажимаю на него, отображается первый уровень, только названия каждого подсписка, h2 тег в excluirItemHandler, тогда я могу открыть соответствующий второй уровень каждого подсписка, нажав на каждый заголовок. Чтобы сделать это, я делаю classi c способом, использующим состояние, установленное в «false», и меняющим его щелчком, так как у меня есть два уровня, мне нужно два состояния, open в listarProdutos и openProd в excluirItemHandler.

Пока все хорошо, но после удаления элемента из БД функция fetchListaProdutosHandler в AdmControls вызывается реквизитом и данные извлекаются снова, однако после этого происходит состояние openProd в listarProdutosItens устанавливается на false, и список закрывается, но это происходит только с соответствующим списком, в котором был удален элемент, если у меня открыты два подсписка и я удаляю элемент только из первого первый будет закрыт, второй останется открытым.

Я полагаю, что это происходит потому, что компонент перерисовывается, а state возвращается в исходное состояние. Итак, я хочу сохранить список открытым после удаления элемента, и я представляю, что если я смогу сохранить state как true, моя проблема будет решена, но я пытаюсь сделать это в течение некоторого времени и у меня ничего нет.

Есть идеи?

* Контейнер AdmControls:

class AdmControls extends Component {

state = {
    referenciaInput: 0,
    valor: '',
    nome: '',
    altura: '',
    furo: '',

    tipos:[]
}

fetchListaProdutosHandler() {
    axios.get('/adm.json')
        .then(res => {

            let inserirKeyCat = Object.entries(res.data).map(item => Object.entries(item[1]))
            inserirKeyCat.map(item => item.map(it => it[1]))
            inserirKeyCat.map(item => item.map(it => it[1]['key'] = it[0]))
            inserirKeyCat.map((item, i) => item.map(it => it[1]['categoria'] = Object.keys(res.data)[i]))

            let pedra = Object.keys(res.data.tipoPedra).map(key => res.data.tipoPedra[key]).sort((a,b) => a.nome.localeCompare(b.nome))
            let rod = Object.keys(res.data.tipoRodopia).map(key => res.data.tipoRodopia[key]).sort((a,b) => a.nome.localeCompare(b.nome))
            let acbPia = Object.keys(res.data.tipoAcabamento).map(key => res.data.tipoAcabamento[key]).sort((a,b) => a.nome.localeCompare(b.nome))
            let acbBanc = Object.keys(res.data.tipoAcabamentoSeco).map(key => res.data.tipoAcabamentoSeco[key]).sort((a,b) => a.nome.localeCompare(b.nome))
            let cuba = Object.keys(res.data.tipoCuba).map(key => res.data.tipoCuba[key]).sort((a,b) => a.nome.localeCompare(b.nome))
            let outros = Object.keys(res.data.outrosProdutos).map(key => res.data.outrosProdutos[key]).sort((a,b) => a.nome.localeCompare(b.nome))

            pedra.unshift({titulo: 'Tipo de Pedra'})
            rod.unshift({titulo: 'Tipo de Rodopia'})
            acbPia.unshift({titulo: 'Tipo de Acabamento Pia'})
            acbBanc.unshift({titulo: 'Tipo de Acabamento Seco'})
            cuba.unshift({titulo: 'Tipo de Cuba'})
            outros.unshift({titulo: 'Outros Produtos'})

            let tipos = [
                pedra,
                rod,
                acbPia,
                acbBanc,
                cuba,
                outros,
            ]

            this.setState({tipos})
        })
        .catch(error => console.log(error))
}

componentDidMount() {
    this.fetchListaProdutosHandler();
}   


render() {
    return(
        <div>
            <ListarProdutos produtosLista={this.state.tipos} fetchLista={() => this.fetchListaProdutosHandler()} />
        </div>
    );
  }
}

* listarProdutos компонент:

const listarProdutos = props => {

const [open, setOpen] = React.useState(false);

return (
    <div>
        <h1 style={{color: 'red'}} onClick={() => setOpen(!open)} >LISTA</h1>
        { open ?
            props.produtosLista.map((item, i) => <ListarProdutosItens listaItens={item} key={item+i} fetchLista={props.fetchLista} />)
        : null}

    </div>
  )
}

* listarProdutosItens:

const listarProdutosItens = props => {

const [openProd, setOpenProd] = React.useState(false);
console.log(openProd)

let itemTitulo = props.listaItens[0].titulo;

const excluirItemHandler = i => {

    let key = props.listaItens[i].key;
    let categoria = props.listaItens[i].categoria;

    axios.delete(`/adm/${categoria}/${key}.json`)
        .then(res => props.fetchLista())
        .catch(error => console.log(error))
}


return (
    <div>
        <h2 onClick={() => setOpenProd(!openProd)} >{itemTitulo}</h2>

        {openProd ?
            <table>
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Valor</th>
                        {
                            itemTitulo === 'Tipo de Acabamento Pia' || 
                            itemTitulo === 'Tipo de Rodopia' || 
                            itemTitulo === 'Tipo de Acabamento Seco' ? 
                            <th>Altura</th> 
                            : null
                        }
                        {itemTitulo === 'Tipo de Cuba' ? <th>Furo</th> : null}
                    </tr>
                </thead>
                {props.listaItens.map((it, i) => {

                    return (
                        i !== 0 ?
                        <thead key={it+i}>
                            <tr>
                                <td>{it.nome}</td>
                                <td>{it.valor}</td>
                                {
                                    itemTitulo === 'Tipo de Acabamento Pia' || 
                                    itemTitulo === 'Tipo de Rodopia' || 
                                    itemTitulo === 'Tipo de Acabamento Seco' ? 
                                        <td>{it.altura}</td> 
                                    : null
                                }
                                {itemTitulo === 'Tipo de Cuba' ? <td>{it.furo}</td> : null}
                                <td><button onClick={() => excluirItemHandler(i)} >Excluir</button></td>
                            </tr>

                        </thead>
                        : null
                    )
                })}
            </table>
        : null}
    </div>
  )

}