"Objects are not valid as a React child"错误

Question

数据未被REACT显示，并且收到以下错误:"对象不作为REACT子对象有效。如果要呈现子元素的集合，请使用数组而不是">

从MongoDB收集的记录被提取并聚集在一个对象数组中。然后使用.map()函数生成要由Display组件呈现的

元素数组。每个

元素包含接收两个道具(firstName和age)的组件

我不知道我错在哪里…

谢谢你的帮助!

SingleRecord.js:

const SingleRecord = (firstName, age) => {    
return (
<li className="singe-record">
{firstName} is {age} years old.
</li>
);
}

export default SingleRecord;

Display.js:

function Display() {
const [records, setRecords] = useState();
const dataArray = [];
const fetchRecords = () => {
fetch('http://localhost:3001/users')
.then(async response => {
const isJson = await response.headers.get('content-type')?.includes('application/json');           
const data = isJson ? await response.json() : null;
for (const elem of data) {
let elemObj = {
_id: elem._id, 
firstName: elem.firstName,
age: elem.age};
dataArray.push(elemObj);
}
setRecords(dataArray);
// check for error response
if (!response.ok) {
// get error message from body or default to response status
const error = (data && data.message) || response.status;
return Promise.reject(error);
}
})
.catch(error => {
console.error('There was an error!', error);
});
}
useEffect(() => {  
fetchRecords();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (!records) {
return null;
}
const LI = records.map(elem => {
let fn = elem.firstName;
let ageee = elem.age;
return <li><SingleRecord firstName={fn} age={ageee} /></li>
})
return (
<div className="records-display">
<h2>Records:</h2>
<ul className ="records-list">
{LI}
</ul>      
</div>
);
}

app.js(后端):

const { MongoClient } = require("mongodb");
const uri = "...hidden...";
const client = new MongoClient(uri);
const database = client.db('holdocsDB');
const records = database.collection('records');
app.get('/users', async (req, res) => {
const cursor = await records.find();  
const results = await cursor.toArray();
res.send(results);         
})

// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.json('error');
});

Answer 1

这是因为LI是一个数组，所以如果您执行以下操作，您将得到相同的错误:

("foo"、"酒吧"){}把它改成这样，然后试一下:

return (
<div className="records-display">
<h2>Records:</h2>
<ul className ="records-list">
{records.map(elem => {
let fn = elem.firstName;
let ageee = elem.age;
return <li><SingleRecord firstName={fn} age={ageee} /></li>
})}
</ul>      
</div>
);