“對象作為 React 子項無效”錯誤

Question

REACT 未顯示數據，並收到以下錯誤：“對象作為 React 子項無效。如果您打算呈現子項集合，請改用數組”

來自 MongoDB 集合的記錄被提取並收集在一個對象數組中。 然后我使用 the.map() function 生成數組

要由 Display 組件呈現的元素。 每個

元素包括接收兩個道具（firstName 和 age）的組件

我不明白我的錯誤在哪里......

謝謝你的幫助！

單記錄.js：

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

顯示.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', 'bar']}

將其更改為此並嘗試一下：

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