React - цикл по объекту, полному массивов, которые содержат объект

Question

Я установил состояние для очень большого куска JSON, в котором есть объект, полный разных массивов, внутри этих массивов есть объект. Я пытаюсь l oop через это установить свойство изображения внутри последнего объекта как еще один элемент состояния и сделать доступным весь мой JSON.

Снимок экрана моей консоли

Снимок экрана JSON

   import React, { useState, useEffect } from "react";
   import ImageCard from "./components/ImageCard";
   import ImageSearch from "./components/ImageSearch";

   function App() {
   const [image, setImages] = useState([]);
   const [isLoading, setIsLoading] = useState([]);
   const [term, setTerm] = useState("");
   const [person, setPersons] = useState([]);

   useEffect(() => {
   fetch(`http://localhost:4000/persons`)
   .then((res) => res.json())
   .then((data) => {
    setPersons({ person: data });
    })
    .catch((err) => console.log(err));
    }, [term]);

    return (
    <div className="container mx-auto">
    <ImageSearch searchText={(text) => setTerm(text)} />

     {isLoading ? (
     <h1 className="text-6xl text-center mx-auto mt-32">Loading...</h1>
      ) : (
     <div className="grid grid-cols-3 gap-4">
      {console.log(person.person)}
     </div>
     )}
     </div>
     );
     }

     export default App;

Это насколько я могу пройти через это.

Визуальное представление части состояния.

{
  "Current Age From": 60,
  "City Of Last Contact": "Newport",
  "First Name": "John",
  "Modified Date Time": "2018-05-09T12:52:08-05:00",
  "Middle Name": "Marcus",
  "Last Name": "Gatens",
  "image": "https://public.opendatasoft.com/api/v2/catalog/datasets/namus-missings/files/bad52b8084bd4e61f0114a88739c7463",
  "Current Age To": 60,
  "Computed Missing Max Age": 37,
  "Computed Missing Min Age": 37,
  "County Of Last Contact": "Lincoln",
  "id Formatted": "MP37393",
  "Race / Ethnicity": "White / Caucasian",
  "Date Of Last Contact": "1995-05-31",
  "State Of Last Contact": "OR",
  "Gender": "Male",
  "link": "https://www.namus.gov//MissingPersons/Case#/37393",
  "namus2Number": 37393,
  "Geo Shape": "{\"type\": \"Point\", \"coordinates\": [-124.0534650116, 
   44.6367888754]}",
  "geo_point_2d": "44.6367888754,-124.053465012"
}

Также это мой первый пост, и я программирую только полтора года и до сих пор борюсь со многими из этого. Я попробовал оператор распространения и .map, но все еще не могу обернуть голову вокруг него. Прошу прощения, если предоставленной мной информации недостаточно.

Answer 1

Если вы устанавливаете «персона» для всего объекта данных, который вы только что выбрали (setPersons({ person: data })), тогда установка «изображения» может быть выполнена следующим образом: setImages({image: data.map(item => item["image"])}).