Axios 响应数据未保存在 State 中答案

【问题标题】：Axios Response Data not saved in StateAxios 响应数据未保存在 State 中
【发布时间】：2021-06-23 02:10:22
【问题描述】：

我有一个自定义钩子useServerStatus，它使用 axios 从 RESTful API 中获取。检查网络选项卡，响应很好，我可以看到我的所有数据。使用console.log 打印结果或使用debugger 在浏览器中检查结果完美无缺。但是，调用我从useState 获得的 setState 方法不会保存响应数据。

ServerStatus 接口 (ServerStatus.ts)

interface ServerStatus {
  taskid: string
  taskmodule: string
  taskident?: string
  status: string
  server: string
  customer: string
}

useServerStatus 挂钩 (useServerStatus.ts)

export default function useServerStatus() {
  const [serverStatus, setServerStatus] = useState<ServerStatus[][]>([]);

  useEffect(() => {
    fetchServerStatus();
  }, []);

  const fetchServerStatus = () => {
    axios.get<ServerStatus[][]>(`${config.apiURL}/servers`)
      .then(res => setServerStatus(res.data));
  }

  return serverStatus;
}

网络标签

https://i.imgur.com/cWBSPVz.png

您在网络选项卡中看到的第一个请求的处理方式完全相同，没有问题。

React 开发者控制台

https://i.imgur.com/YCq3CPo.png

【问题讨论】：

尝试将您的数据获取代码移动到 useEffect 挂钩中？这是从文档中获取异步数据的建议方式
@konekoya 我刚试过，结果和以前一样
首先你在useEffect中没有依赖数组，我认为它的作用是发送未定义的。如果您只想在第一次渲染时获取服务器状态，请尝试插入一个空数组作为依赖项。
@MartinZ 我确实有这个，我在复制和格式化代码时一定错过了它。我会编辑它
@NilsFahle 好的，很好。我假设如果你 console.log res.data 你从网络标签得到相同的结果？

标签： reactjs typescript axios react-hooks

【解决方案1】：

试试

const fetchServerStatus = () => {
    axios.get<ServerStatus[][]>(`${config.apiURL}/servers`)
      .then(res => { setServerStatus(res.data) });
}

【讨论】：

【解决方案2】：

所以，回答我自己的问题：

我发现问题不在于数据没有保存在状态中，而是 axios 没有正确接收数据。

我用解决方法修复了它。我没有在后端返回ServerStatus[][]，而是返回了ServerStatus[]。我可以改用这些数据。

【讨论】：

【解决方案3】：

在https://reactjs.org/docs/hooks-custom.html 的课程之后，我最明显的反应是，您没有在代码中返回状态变量 serverStatus，而示例返回的是“isOnline”。尝试通过在自定义效果中返回 serverStatua 来匹配它，看看它是否有帮助。

【讨论】：

我确实有，我在复制和格式化代码时一定错过了它。我已经在问题中添加了它，但结果保持不变。
好的。值得一试。
查看您更新的帖子，您是否尝试过不使用空条件变量数组 2nd arg 的效果？也许它也不喜欢这样，因为文档说“确保只无条件地调用其他 Hooks”并显示所有使用效果调用，根本没有条件属性。
您还可以在调用的地方添加代码并使用自定义挂钩吗？为了澄清这个问题，您是说无论您调用自定义钩子，它都没有收到更新的信息，就好像 setServerStatus 没有被调用一样？而且您已经尝试在您的 axios 中放置一个 console.log，然后承诺确认 .then 在运行时实际到达？