後端傳來的資料格式如下:
{data: Array(15)}
data[0]:
option: Array(1)
0: "字串"
_id: "字串"
欄位1: "字串"
欄位2: "字串"
欄位3: "字串"
data[1]:
option: Array(1)
0: "字串"
_id: "字串"
欄位1: "字串"
欄位2: "字串"
欄位3: "字串"
data[2]:
.
.
.
data[14]
但是會顯示以下的錯誤:
Error: Objects are not valid as a React child (found: object with keys {data}). If you meant to render a collection of children, use an array instead.
以下是前端的code:
import React, { useEffect, useState } from 'react';
import services from '../backEndAPI';
const Component1 = () => {
const [dbvalue, setDbvalue] = useState(null)
//option, _id, 欄位1, 欄位2, 欄位3
const getAlldbValue = async () => {
try {
const resp = await services.getAlldbValue();
console.log(resp.data) //查看F12有顯示出來後端傳來的資料
setDbvalue(resp.data) //!!!!!!!!!!!但這裡會報錯!!!!!!!!!!!!!!!!!!!
} catch (error) {
console.log(error)
alert('Failed!')
}
}
useEffect(() => {
getAlldbValue()
}, [])
if(!dbvalue) {
return (
<p>Loading Component...</p> //而且前端頁面會顯示這一行
)
}
return (
<p>{dbvalue}</p>
);
};
export default Component1;
目前想取出後端這些資料在前端顯示,該如何解決這個問題,懇請各位大大解答,感謝
隨便寫的 demo
看起來你的 data 應該是長
data: [
[...],
[...],
[...]
]
不能直接印 array
所以你要嘛用 JSON.stringify
用嘛用 loop 印出來