Tengo un json local que devuelve todos los valores en console.log, por lo que sé que la ruta es correcta. Sin embargo, cuando trato de obtener un valor de entrada de nombre, me da el error uni.map is not a function .
¿Qué me estoy perdiendo? Cualquier ayuda será fabulosa :).
import { useState } from 'react' import axios from 'axios' import Uni from './Uni' function Unis() { const [unis, setUnis] = useState([]) const [query, setQuery] = useState('') function handleSearchQuery(e) { e.preventDefault() setQuery(e.target.value) } async function searchUnis(e) { e.preventDefault() console.log() var response = await axios.get(data.json) setUnis(response.data) } return ( <div> <input value={query} onChange={handleSearchQuery} /> <button onClick={searchUnis}>Search</button> <ul> { unis.map(function(i, index){ return ( <li key={index}> <Uni name={i.name} /> </li> ) }) } </ul> </div> ) } export default Unis;datos.json
{ "data": [ { "name": "xxx", "years": "2022" }, { "name": "hhh", "years": "2021" } ] }Buena suerte,
Ha utilizado data.json directamente sin importar.
var response = await axios.get(data.json)Paso 1:
Importe el archivo data.json en el archivo Unis.
import Data from './data.json';Paso 2:
Utilice los datos como a continuación.
var response = await axios.get(Data.data);