Creé una selección usando reaccionar js.
import { useState } from "react"; import "./styles.css"; const options = [ { id: "test1", label: "label1" }, { id: "test1", label: "label2" }, { id: "color", label: "Test" } ]; export default function App() { const [value, setValue] = useState(""); const handleChange = (e) => { setValue(e.target.value); }; return ( <div className="App"> <select value={value} onChange={handleChange}> {options.map((i) => { return <option value={i.id}>{i.label}</option>; })} </select> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); }Tengo una situación en la que el valor (ID) es el mismo pero el título es diferente, como en el caso de las 2 primeras opciones.
Intentando hacer clic en la label2 2, la flecha seleccionada sigue seleccionada en la anterior (etiqueta 1). ¿Cómo arreglar esto?
demostración: https://codesandbox.io/s/red-microservice-tesgs?file=/src/App.js:0-669
Suponiendo que no puede cambiar las identificaciones (la mejor manera es tener identificaciones únicas), puede confiar en el índice de su matriz de opciones:
const options = [ { id: "test1", label: "label1" }, { id: "test1", label: "label2" }, { id: "color", label: "Test" } ]; export default function App() { const [value, setValue] = useState({ id: "", index: "" }); const handleChange = (e, index) => { setValue({ id: e.target.value, index: index }); }; return ( <div className="App"> <select value={options[value.index]} onChange={(e, index) => handleChange(e, index)} > {options.map((i, index) => { return ( <option key={index} value={i.id}> {i.label} </option> ); })} </select> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); }Parece que necesita proporcionar un atributo selected a su elemento <option /> , por ejemplo:
const [value, setValue] = useState(""); /*[...]*/ <select onChange={handleChange}> {options.map(({id, label}, index) => { return <option key={index} value={id} selected={value === id}>{label}</option>; })} </select> Además, tenga en cuenta el accesorio key anterior, siempre debe tener esto al iterar sobre los nodos JSX. Este debería ser un valor único para ese índice, he usado el índice de matriz, pero esto realmente debería ser algo así como la ID. Si usa el índice, introducirá todo tipo de errores extraños cuando cambien los datos de origen.
En cuanto a la id duplicada en su matriz, como se mencionó anteriormente, personalmente me parece una estructura de datos deficiente. Me aseguraría de que su id sea siempre única.
¿Qué propósito tienes para que sea duplicado, por interés?