Question

我正在开发一个有两个清单的应用程序。当您单击第一个清单中的产品时，第二个清单将递增。

我的问题是，单击第一个清单中的产品会有延迟。这需要毫秒。我发现延迟发生在调用setState时。 SetState会引起一些延迟。

如果我评论setState，一切都会立即进行。

我的代码

|  Building for production...Error: Failed to launch chrome!
[Prerenderer - PuppeteerRenderer] Unable to start Puppeteer

我的问题

我不知道问题的原因。我相信问题是由于每次调用setState时都会使用react native渲染整个屏幕而发生的。但是我不知道如何解决这个问题。客户抱怨延迟，我需要解决这个问题。有人可以帮我吗？

**************** 编辑 ****************

我的完整代码

https://github.com/renatosistemasvc/temo/blob/master/subir.js

Answer 1

我阅读了您的代码，认为还可以。

您可以尝试将setState与函数配合使用，以与状态任务同步运行：

    selectProduct(item, quantidade) {

        this.setState(state => {

            let valorTotalNota = 0;
            let itensNota = [];
            let ind = false;

            for (let i in state.itensNota) {

                let a = state.itensNota[i];

                if (item.id == a.produto_id) {

                    ind = true;

                    //SE EXISTE ESTOQUE DISPONÍVEL INCREMENTA, SE NÃO, MANTÉM QUANTIDADE ANTERIOR
                    let refQtd = (item.estoque >= (a.quantidade + quantidade)) ? a.quantidade + quantidade : a.quantidade;

                    valorTotalNota = Decimal.add(valorTotalNota, Decimal.mul(refQtd, a.preco)).toString();
                    itensNota.push({ cod: null, nome: a.nome, preco: a.preco, desconto: a.desconto, imgTablet: a.imgTablet, quantidade: refQtd, estoque: a.estoque, produto_id: a.produto_id });



                } else {

                    valorTotalNota = Decimal.add(valorTotalNota, Decimal.mul(a.quantidade, a.preco)).toString();
                    itensNota.push({ cod: null, nome: a.nome, preco: a.preco, desconto: a.desconto, imgTablet: a.imgTablet, quantidade: a.quantidade, estoque: a.estoque, produto_id: a.produto_id })

                }

            }

            if (!ind && item.estoque > 0) {

                valorTotalNota = Decimal.add(valorTotalNota, Decimal.mul(quantidade, item.preco)).toString();
                itensNota.splice(0, 0, { cod: null, nome: item.nome, preco: item.preco, desconto: item.desconto, imgTablet: item.imgTablet, quantidade: quantidade, estoque: item.estoque, produto_id: item.id });

            }

            return {
                ...state,
                itensNota,
                valor_distribuido: valorTotalNota
            }
        })
    }

Answer 2

代码似乎正常。可能会使性能更好的一件事是使selectProduct异步。这样，它可以立即返回，并且按下列表项不会太慢，尽管更新其他列表仍需要一些时间：

selectProduct = async (item, quantidade) => { ... }

您应考虑的其他事项是：

禁用远程调试器。有时，在进行远程调试时，React Native应用程序会变慢。
在另一台设备（最好是更好的设备）中测试该应用程序。如果该设备在该设备上运行良好，则由于参数低，导致问题的原因是您当前正在使用的设备。

多次调用setState时延迟

2 个答案: