Tengo una función que toma datos de un archivo JSON local y los representa. cosas simples Hago la solicitud de recuperación dentro del gancho useEffect para activarlo solo en el primer renderizado. Una vez que se obtienen los datos, los establece en employees . Una vez en employees , uso otro useEffect para establecer otros estados con datos de employees .

 const [employees, setEmployees] = useState<any>([]); useEffect(() => { fetch("data.json", { headers: { "Content-Type": "application/json", Accept: "application/json", }, }) .then(function (response) { return response.json(); }) .then(function (data) { setEmployees(data["employees"]); }); }, []); useEffect(() => { console.log(employees) /* set some other state */ }, [employees]); /*render list of employees*/

Mi problema es que en realidad no puedo acceder a las propiedades dentro de employees . Cuando consuelo. registro el contenido de employees , esto es lo que veo, una matriz de objetos

 [ { "first_name": "John", "last_name": "Doe", }, { "first_name": "Jane", "last_name": "Doe", }]

Entonces, para acceder a las propiedades del objeto, he intentado esto

 employees[0]["first_name"] employees[0]."first_name" employees[0][first_name] employees[0].first_name

En los dos primeros, me sale este error.

 TypeError: Cannot read properties of undefined (reading 'first_name')

Mientras que en los ultimos 2 me sale este error

 Cannot find name 'first_name'

Si alguien pudiera decirme cómo acceder correctamente a mis datos, ¡se lo agradecería mucho!

Editar: estoy trabajando en Typescript si eso cambia algo