我一直在尝试在react中实现条件渲染，它将显示"Loading. "如果没有获取数据，它将显示所获取的数据。它将从get服务器获得的数据是json格式，当我试图发布该数据时，我遇到了一个空白页。我尝试过其他的事情，比如尝试发布纯文本的成功，而不是呈现的数据，在这种情况下，我得到了数据的页面。
下面是产生错误的代码文件。
import { useState, useEffect } from 'react'
function changeFeed(bookData){
let elem;
if (Object.keys(bookData).length === 0) elem = <p>Loading</p>
else
elem = <p>{bookData}</p>
return elem;
}
export default function Feed() {
const [bookData, setBookData] = useState({});
useEffect(() => {
fetch('/book')
.then(res => res.json())
.then(data => setBookData(data))
.catch(err => console.error("Custom err: ",err))
}, []);
return (
<div>
{changeFeed(bookData)}
</div>
)
}
我遇到的错误是display:
Uncaught 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.
at throwOnInvalidObjectType (react-dom.development.js:14757:1)
at reconcileChildFibers (react-dom.development.js:15698:1)
at reconcileChildren (react-dom.development.js:19971:1)
at updateHostComponent$1 (react-dom.development.js:20733:1)
at beginWork (react-dom.development.js:22447:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
at invokeGuardedCallback (react-dom.development.js:4274:1)
at beginWork$1 (react-dom.development.js:27405:1)
at performUnitOfWork (react-dom.development.js:26513:1)
react-dom.development.js:18572 The above error occurred in the <p> component:
at p
at div
at Feed (http://localhost:3000/static/js/bundle.js:129:82)
at div
at http://localhost:3000/static/js/bundle.js:1449:66
at Grid (http://localhost:3000/static/js/bundle.js:8640:87)
at div
at http://localhost:3000/static/js/bundle.js:1449:66
at Grid (http://localhost:3000/static/js/bundle.js:8640:87)
at div
at http://localhost:3000/static/js/bundle.js:1449:66
at Box (http://localhost:3000/static/js/bundle.js:19329:72)
at Home
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:18542:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:18199:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:18562:5)
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18572
react-dom.development.js:26874 Uncaught 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.
at throwOnInvalidObjectType (react-dom.development.js:14757:1)
at reconcileChildFibers (react-dom.development.js:15698:1)
at reconcileChildren (react-dom.development.js:19971:1)
at updateHostComponent$1 (react-dom.development.js:20733:1)
at beginWork (react-dom.development.js:22447:1)
at beginWork$1 (react-dom.development.js:27381:1)
at performUnitOfWork (react-dom.development.js:26513:1)
at workLoopSync (react-dom.development.js:26422:1)
at renderRootSync (react-dom.development.js:26390:1)
at recoverFromConcurrentError (react-dom.development.js:25806:1)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
我传递的数据是json数组，像这样:
0: {_id: '628a333def2ed59e884896b2', title: 'everything need to be known', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: '69-ass-69', …}
1: {_id: '628a39263e2377b56cb55a28', title: 'everyhton needto knpe', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: '159', …}
2: {_id: '628a3a2a66c6bb5f9c8d39c3', title: 'jkejvnskre vkn', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: 'lkrmvle', …}
3: {_id: '628a3aa53de4e9fa6f4a6124', title: 'jcnj jflkl kK', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: 'lck lsdk', …}
4: {_id: '628a5bad4c97c8d9a5828dc7', title: 'avrj f,lskfjf', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: 'lkv skjf ', …}
5: {_id: '628a5c4baa89e5d3a93f6398', title: 'k cjdkj,fk;klad', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: 'klc wjd', …}
如果bookData是对象，则不能执行<p>{bookData}</p>。{value}中的值应该是字符串、数字等基本数据类型。不能是对象
我不确定你的对象结构看起来像什么，你应该把它改成-
<p>{bookData[0].title}</p>
如果你想输出所有的bookData，你可以使用数组。map函数
const elem = bookData.map(book => <p>{book.title}</p>);