iT邦幫忙

1

[React.js] 無法顯示後端傳來的資料

  • 分享至 

  • xImage

後端傳來的資料格式如下:

{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;

目前想取出後端這些資料在前端顯示,該如何解決這個問題,懇請各位大大解答,感謝

看更多先前的討論...收起先前的討論...
error 不是跟你說要用 array 而不是 object 了
dragonH iT邦超人 5 級 ‧ 2020-03-10 17:30:25 檢舉
沒看到你的 setQuestion 阿
p39212053 iT邦新手 4 級 ‧ 2020-03-10 17:31:37 檢舉
抱歉打錯 是 setDbvalue
p39212053 iT邦新手 4 級 ‧ 2020-03-10 17:33:37 檢舉
L大抱歉QQ,改成 <p>dbvalue</p> 會只顯示字串不會帶入JS的值
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
dragonH
iT邦超人 5 級 ‧ 2020-03-10 18:01:58
最佳解答

隨便寫的 demo

codepen

看起來你的 data 應該是長

data: [
    [...],
    [...],
    [...]
]

不能直接印 array

所以你要嘛用 JSON.stringify

用嘛用 loop 印出來

看更多先前的回應...收起先前的回應...
p39212053 iT邦新手 4 級 ‧ 2020-03-11 13:35:09 檢舉

感謝D大,
我在 return裡改成
<pre>{JSON.stringify(dbvalue,undefined,2)}</pre>
可以印出所有資料,
但要用

<pre>{JSON.parse(dbvalue)}</pre>

就會報錯,/images/emoticon/emoticon13.gif
後端用res.json(data)傳過來的

dragonH iT邦超人 5 級 ‧ 2020-03-11 14:10:16 檢舉

p39212053

正常呀

JSON.stringify 是轉成 string

一定沒問題的

JSON.parse 的話

不論是印 array 或者 object

都會有問題

所以你的 data 是 array

那就要用 for loop 或者 map 印出你要的

p39212053 iT邦新手 4 級 ‧ 2020-03-11 14:39:53 檢舉

D大你好,我用MAP的方式取值
已解決,感謝您/images/emoticon/emoticon02.gif

dragonH iT邦超人 5 級 ‧ 2020-03-11 15:03:11 檢舉

/images/emoticon/emoticon12.gif

我要發表回答

立即登入回答