Estoy usando Reaccionar. Tengo dos archivos: biologia.js y fleekstorage-functions.js En fleekstorage-functions.js hay un método Fleek Storage que puede listar archivos de mi depósito:
const ListFiles = async () => { const input = { apiKey, apiSecret, getOptions: [ 'bucket', 'key', 'hash', 'publicUrl' ], }; try { const result = await fleek.listFiles(input); return result } catch (e) { console.log('error', e); } }Y en biologia.js tengo:
var articoli = ListFiles() const Biologia = () => { return ( <> <br/><br/> <h1 className="titolo">Articoli di Biologia:</h1> <p className="titolo">Qui si parlerà di biologia.</p> {articoli} </> ); }Como ves, quería imprimir en una página la salida de ListFiles, pero la consola me devolvió este error:
Error no detectado: los objetos no son válidos como hijos de React (encontrado: [promesa de objeto]). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.
¿Podría ayudarme a imprimir la matriz y los elementos individuales en biologia.js?
Su principal problema aquí parece ser que ListFiles() es una función asíncrona . En otras palabras, siempre devolverá una Promesa, lo que significa que var articoli = ListFiles() siempre almacenará una Promesa dentro articoli .
Como lo indica el error que está viendo, una Promesa no es un elemento renderizable. Tendrá que esperar a que se resuelva la Promesa y luego transformar los resultados deseados en lo que desea representar. Por ejemplo, configure su estado con un gancho :
const [articoli, setArticoli] = useState(null); Luego puede establecer el valor después de que se haya resuelto la Promesa de ListFiles() :
ListFiles().then((list) => { // If the file list needs to be converted into JSX, do it here. Eg: const mappedList = list.map((item, index) => { return ( <p key={index}>{item}</p> ); }); setArticoli(mappedList); // Otherwise, just set the value directly: setArticoli(list); });