Предупреждение: Обнаружены двое детей с одинаковым ключом `-`. Ключи должны быть уникальными, чтобы компоненты сохраняли свою идентичность при обновлении

Question

Я выполняю фрагмент кода следующим образом:

renderPropositions() {
        const items = this.props.propositionAddress.map(async address => {
            // get the instance of deployed contract
            const instance = new web3.eth.Contract(JSON.parse(Proposition.interface), address);

            const title = await instance.methods.pTitle().call();

            return {
                header: title,
                meta: address
            }
        });

        return <Card.Group items={items} />;

    }

Это постоянно вызывает ошибку выше. Но когда я отбрасываю функции async и await, ошибки не возникает.

Может кто-нибудь помочь?

Answer 1

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

Вы должны показать код, в котором вы фактически визуализируете элементы (в Card.Group?), если вы хотите более подробный ответ о том, как удалить предупреждение.