Tengo este JSON devuelto desde el servidor:
[ { "symbol":"one option" }, { "symbol":"second option" } ....... ]Servicio para obtener los datos:
useEffect(() => { const requestOptions = { method: 'GET', headers: { 'Content-Type': 'application/json', }, credentials: 'include', }; fetch('/data', requestOptions) .then((response) => { if (response.status !== 200) { throw new Error(response.status); } else { return response.json(); } }) .then( (futurePairs) => { console.log(futurePairs) props.onSetAvailableFuturesPairs(futurePairs); }, (error) => { console.log(error); } ); }, []);......
onSetAvailableFuturesPairs: addAvailableFuturesPair,......
export const ADD_AVAILABLE_FUTURES_PAIR = 'availableFuturesPairs:addAvailableFuturesPairs'; export function addAvailableFuturesPair(newPair) { return { type: ADD_AVAILABLE_FUTURES_PAIR, payload: { newPair: newPair } } }......
availableFuturesPairs: [],......
Mostrar datos:
<Select onChange={event => changeSelectedFuturesPair(event.target.value)} value={props.selectedFuturesPair}> {props.availableFuturesPairs.map((option) => ( <option key={option.symbol} value={option.symbol}>{option.symbol}</option> ))} </Select>Pero me sale error:
`Warning: Each child in a list should have a unique "key" prop.`¿Sabes cómo puedo arreglar esto?
Prueba con el índice para pasar a la clave.
{props.availableFuturesPairs.map((option) => ( <option key={option.symbol} value={option.symbol}>{option.symbol}</option> ))}Actualizado:
{props.availableFuturesPairs.map((option, index) => ( <option key={index} value={option.symbol} >{option.symbol}</option> ))}Puede proporcionar índice como segundo parámetro para la función de flecha
props.availableFuturesPairs.map((option,index) => ( <option key={index} value={option.symbol}>{option.symbol}</option> ))o instalar uuidv4
y usarlo como
props.availableFuturesPairs.map((option) => ( <option key={uuidv4()} value={option.symbol}>{option.symbol}</option> ))