javascript - ¿Cómo manejo una respuesta de API con useState para actualizar un estado?

Estoy trabajando en una respuesta de API. Mi objetivo es tomar esta respuesta de API para actualizar un estado específico.

Aquí el fragmento de código necesario de mi componente funcional:

const [recordImagesPayload, setRecordImagesPayload] = useState([]);

  useEffect(() => {
    const headers = { 'Content-Type': 'application/json' };
    // const payload = JSON.stringify({ ...createPayload(), recordImage: newImage });

    request(`${url}`, { headers, method: 'GET' })
      .then((response: any) => response.json())
      .then(json => {
        var obj = JSON.parse(json);
        var res: any = [];
        for (var i in obj) {
          res.push(obj[i]);
        }
        setRecordImagesPayload(res);
        console.log(res);
      });
  }, []);

Mi consola no está mostrando el resultado de mi última línea de código. Probablemente estoy haciendo algo mal con la respuesta, pero no sé qué hacer.

Por favor, ayuda.

Gracias de antemano. :)

Respuesta #1

Asumo que la función de solicitud está usando la función fetch, en ese caso ya estás parseando la respuesta json usando la llamada response.json(), así que el valor resuelto en el siguiente then no es json, por lo que no tienes que usar JSON.parse allí

Intenta ejecutar esto. Aquí, en lugar de crear un nuevo arreglo y un bucle for, simplemente podemos usar Object.values

useEffect(() => {
        const headers = { 'Content-Type': 'application/json' };
        // const payload = JSON.stringify({ ...createPayload(), recordImage: newImage });
    
        request(`${url}`, { headers, method: 'GET' })
          .then((response: any) => response.json())
          .then(result => {
            const res = Object.values(result);
            setRecordImagesPayload(res);
            console.log(res);
          });
      }, []);

Respuesta #2

Gracias @Akhil. Tuve un problema menor en mi código relacionado con Typescript que estaba causando el problema. El tipo del resultado no estaba especificado, pero aparte de eso, la respuesta de Akhil fue muy precisa. Muchas gracias por la rápida respuesta y el apoyo.

Aquí está el código final que me funcionó:

useEffect(() => {
        const headers = { 'Content-Type': 'application/json' };
        // const payload = JSON.stringify({ ...createPayload(), recordImage: newImage });
    
        request(`${url}`, { headers, method: 'GET' })
          .then((response: any) => response.json())
          .then(result: any => {
            const res = Object.values(result);
            setRecordImagesPayload(res);
            console.log(res);
          });
      }, []);