如何使用 useState 处理 API 响应以更新状态？

Question

我正在处理 API 回复。我的目标是利用这个 API 响应来更新指定的状态。

这里是我的功能组件的必要代码片段：

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);
      });
  }, []);

我的 console.is 没有显示我最后一行代码的资源。我可能对响应做错了什么，但我不知道该怎么做。

请帮忙。

提前致谢。 :)

Answer 1

我假设请求函数正在使用 fetch 函数，在这种情况下，您已经在使用 response.json() 调用解析 json 响应，因此下一个 then 中的解析值不是 json，因此您不必在

处使用 JSON.parse

尝试运行这个。在这里，我们可以使用 Object.values

而不是创建新数组和 for 循环

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);
          });
      }, []);

Answer 2

谢谢@Akhil。我的代码中有一个关于 Typescript 的小问题导致了这个问题。没有指定结果的类型，但除此之外，Akhil 的回答非常准确。非常感谢您的快速响应和支持。

这是对我有用的最终代码：

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);
          });
      }, []);

如何使用 useState 处理 API 响应以更新状态？

How do I handle an API response with useState to update a state?

javascript

api

promise

typescript

reactjs