Estoy tratando de generar datos de una API, pero no tiene una identificación ni ningún dato único para distinguir el elemento.
Así es como se ven los datos cuando hago console.log
Array [ Object { "photo1": "www.picexample.com", }, Object { "photo2": "www.picexample.com", }, ]Este es mi código:
Inicio.js
const [portfolio, setPortfolio] = React.useState([]); const renderItem= ({item}) => { return ( <View> <Image source={{uri: ?}} resizeMode="cover" /> </View> ); } useEffect (() => { .then((result) => { setPortfolio(result.myImage); console.log(portfolio); }) }); return ( <ScrollView> <FlatList scrollEnabled={false} data={portfolio} renderItem={renderItem} keyExtractor={?} /> </ScrollView> );ACTUALIZACIÓN (Basado en Joel Hager)
const keyExtractor = (portfolio, idx) => `${Object.keys(portfolio)}-${idx}` const renderItem = ({item}) => { console.log(item); return ( <View> <Image source={{uri: item}} resizeMode="cover" /> </View> ); } return ( <FlatList scrollEnabled={false} data={portfolio} renderItem={renderItem} keyExtractor={keyExtractor} /> );Sin poder publicar el código React Native en funcionamiento, esto explicará lo que está haciendo conceptualmente.
Está tomando la instancia del elemento en la matriz que se está pasando (el 'elemento') Está tomando todas las claves para ello: Object.keys() Está mostrando la primera
Hay algunas advertencias: espera un valor. Siempre podría usar la fusión nula para hacer otra cosa, pero tendría que saber más sobre los datos para cubrir esos casos. Si siempre obtiene una clave, siempre obtendrá un valor. También puede agregar el valor del índice en el extractor para darle más especificidad. Su código de reacción debería verse así:
keyExtractor={(item, idx) => `${Object.keys(item)}-${idx}`}nota: siempre es bueno extraer la función fuera de la lista plana para que no se vuelva a crear cada renderizado. Entonces se vería algo como esto:
const keyExtractor = (item, idx) => `${Object.keys(item)}-${idx}` ... <Flatlist ... keyExtractor={keyExractor} ...Más información sobre keyExtractor: https://reactnative.dev/docs/flatlist#keyextractor
El literal de la plantilla pondrá el valor de la cadena de la clave y el índice con un '-' entre ellos. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
const payload = [ { "photo1": "www.picexample.com", }, { "photo2": "www.picexample.com", }, ] payload.map((item, idx) => console.log(Object.keys(item)[0] + `-${idx}`));