接收未定义而不是 JSON

Question

我正在使用 React axios 从服务器接收 JSON（objects 的数组）（服务器端写在 Go 上，我通过 Postman 检查，JSON 已正确发送).

这是我在客户端获取数据的方式：

export const getPostData = async () => {
    const URL = 'http://localhost:8083/test'
    try {
        const { data: { data }} = await axios.get(URL);
        console.log(data)
        return data;
    } catch (error) {
        console.log(error)
    }
};

这就是在 App.js 中调用 getPostData 的方式：

const App = () => {
  const [ posts, setPosts ] = useState([]);

  useEffect(() => {
    getPostData()
      .then((data) => {
        setPosts(data)
        console.log(data)
      })
  },[]);

问题是我在浏览器控制台中得到 undefined。我在这里发现了很多类似的问题，但我找不到解决方案（发送 JSON 时设置了 Access-Control-Allow-Origin header）。

我应该多学点什么，可能是哪里出了问题？如果有任何帮助，我将不胜感激！

如果这可能有帮助，下面是我在 Go 中发送 JSON 的方式：

    c.Header("Access-Control-Allow-Origin", "*")
    c.Header("Content-Type", "application/json")
    c.JSON(http.StatusOK, gin.H{
        "message": "Hello",
    })

Answer 1

这看起来很可疑：

const { data: { data }} = await axios.get(URL);

它试图从来自 axios 的响应的 data 属性上的一个对象中读取一个名为 data 的属性，像这样没有解构：

const data = (await axios.get(URL)).data.data;

你的 Go 代码看起来不像它在它发送的内容周围放置了一个 {"data": ___} 包装器，而 Axios 只添加了一个层的 {data: ___} 包装器它给你的回应，而不是两个。

如果您想要 JSON 响应中的对象，请移除内部解构：

const { data } = await axios.get(URL);

data 将是 {message: "Hello"} 假设 Go 代码发送 JSON {"message": "Hello"}.

另外，您的 JavaScript 代码似乎需要一系列帖子，但您的 Go 代码只是发送 {"message": "Hello"}.

接收未定义而不是 JSON

Receiving undefined instead of JSON

api

json

go

reactjs

axios