英文:
Receiving undefined instead of JSON
问题
我正在使用React axios从服务器接收JSON数据（对象数组）。服务器端使用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标头已设置）。
我应该学习更多什么，问题可能出在哪里？非常感谢任何帮助！
如果这有帮助的话，这是我在Go中发送JSON的方式：
c.Header("Access-Control-Allow-Origin", "*")
c.Header("Content-Type", "application/json")
c.JSON(http.StatusOK, gin.H{
"message": "Hello",
})
英文:
I am using React axios to receive the JSON (array of objects) from server (server side is written on Go, I checked via Postman, JSON is sent properly).
Here is how I get the data on client side:
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)
}
};
And this is how the getPostData is called in App.js:
const App = () => {
const [ posts, setPosts ] = useState([]);
useEffect(() => {
getPostData()
.then((data) => {
setPosts(data)
console.log(data)
})
},[]);
The problem is I get undefined in browser console. I found many similar questions asked here, but I could not find the solution (the Access-Control-Allow-Origin header is set when I send the JSON).
What should I learn more, where could be the problem? I would be very grateful for any help!
If this could be helpful, here is how I send the JSON in Go:
c.Header("Access-Control-Allow-Origin", "*")
c.Header("Content-Type", "application/json")
c.JSON(http.StatusOK, gin.H{
"message": "Hello",
})
答案1
得分: 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);
假设Go代码发送的JSON是{"message": "Hello"}，那么data将是{message: "Hello"}。
另外，你的JavaScript代码似乎期望一个帖子数组，但是你的Go代码只是发送了{"message": "Hello"}。
英文:
This looks suspect:
const { data: { data }} = await axios.get(URL);
That tries to read a property called data from an object on the data property of the response from axios, like this without the destructuring:
const data = (await axios.get(URL)).data.data;
Your Go code doesn't look like it puts a {"data": ___} wrapper around what it sends, and Axios only adds one layer of {data: ___} wrapper to what it gives you in the response, not two.
If you want the object from the JSON response, remove the inner destructuring:
const { data } = await axios.get(URL);
data will be {message: "Hello"} assuming the Go code sends the JSON {"message": "Hello"}.
Separately, your JavaScript code seems to expect an array of posts, but your Go code is just sending {"message": "Hello"}.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论