Tengo algunas listas desplegables en mi aplicación que estoy llenando mediante programación, básicamente funciona bien, pero cuando estoy enviando algo a la consola, tengo muchos resultados repetitivos.

 return ( <InputGroup className="pdInputGroup"> <InputGroup.Text className="pdInputGroupText">{props.name}</InputGroup.Text> <Dropdown onSelect={handleSelect} align='start'> <Dropdown.Toggle className={!!props.isInvalid ? "dropdown-btn dropdownError" : "dropdown-btn"}>{props.preSelection}</Dropdown.Toggle> <Dropdown.Menu> { list.map((item, index) => { console.log("item: " + item + " index: " + index); return <Dropdown.Item eventKey={index}>{item}</Dropdown.Item> }) } </Dropdown.Menu> </Dropdown> </InputGroup> );

El latido está sincronizado con la recepción de información de un websocket, un latido del servicio backend si una aplicación aún es responsable. La información del websocket no cambia nada en este caso, cuando el latido me dice que la aplicación no es responsable o que falta el latido, se muestra un cuadro de diálogo. Nada más y no tiene conexión en mi punto de vista de estas listas desplegables.

La salida se ve así:

 item: black index: 0 DropDownInput.js:27 item: white index: 1 DropDownInput.js:27 item: yellow index: 2 DropDownInput.js:27 item: green index: 3 DropDownInput.js:27 item: black index: 0 DropDownInput.js:27 item: white index: 1 DropDownInput.js:27 item: yellow index: 2 DropDownInput.js:27 item: green index: 3 DropDownInput.js:27 item: blue index: 4 DropDownInput.js:27 item: black index: 0 DropDownInput.js:27 item: white index: 1 DropDownInput.js:27 item: yellow index: 2 DropDownInput.js:27 item: green index: 3 DropDownInput.js:27 item: black index: 0 DropDownInput.js:27 item: white index: 1 DropDownInput.js:27 item: yellow index: 2 DropDownInput.js:27 item: green index: 3 DropDownInput.js:27 item: blue index: 4 DropDownInput.js:27

La aplicación tampoco parece tener ningún problema, o no se vuelve a renderizar, pero creo que la salida no es normal.

¿Cómo puedo depurar esto?