fetch 给了我一个完整的数组，但是当我尝试访问它时它是空的

Question

I get an object from a Symfony rest API. This object has a property "shooting" which is an array and this array is full when I console.log it but when i try to access it, it is empty

This is my fetch request

const getProjectsAvailable = async () => {
    const data = await fetch(
      `${process.env.GATSBY_CORE_URI}/api/dashboard/supplier/projects/available`,
      {
        headers: {
          [`X-Auth-Token`]: `${token}`,
          [`Accept`]: `application/json`,
        },
      }
    );

    return data;
  };

Here is the project object that i get back from fetch request

0: {id: 258, name: "Project26-1", reference: "A6568", isOfferValidated: null, source: "dashboard", …}

It has a shooting key which contains an array and it is not empty

shootings: Array(1)
   0:
   addressCity: "Paris"
   addressCountry: {id: 76}

But when i set this object to my component state, all values stay the same except the shooting key which becomes an empty array

const [projects, setProjects] = useState([]);

useEffect(() => {
  getProjectsAvailable().then(res =>
    res.json().then(data => {
      setProjects(data);
    })
  );
}, []);

I have no idea why does it act like that.

Thanks in advance

---

EDIT:

For example, the first line with console.log gives me the response object with a full shooting array while the second one sets it to my state but shooting array is empty

  useEffect(() => {
    getProjectsAvailable().then(response => console.log(response));
    getProjectsAvailable().then(response => setProjects(response));
  }, []);

Answer 1

Ok it is my bad. Somewhere else in the code, there was a.split() on the shooting property which mutates the array so the props changed and shooting array got empty