TypeError: props.items is undefined

Question

这意味着props.items未定义？父组件应该将数据传递给Users组件。我已经检查了Users组件是否正确接收了带有数据的对象。那么，JSX中的语法有什么问题吗？

错误消息：

TypeError: props.items is undefined
Users
C:/...src/components/Users/Users.js:3
1 | function Users(props) {
2 |   return (
> 3 |     <ul>
4 |       {props.items.map((user) => (
5 |         <div>
6 |           {user.name} - {user.age}

父组件：

import {useState} from 'react';
import Card from './components/UI/Card';
import Form from './components/Form/Form';
import users from './data/data';
import Users from './components/Users/Users';
function App() {
const [userDB, setUserDB] = useState(users);
function addUserToDB(user) {
setUserDB(prevUsers => {
return [user, ...prevUsers];
});
};
return (
<div>
<Card>
<Form onAddToDB={addUserToDB} />
</Card>
<Users userData={userDB} />
</div>
);
}
export default App;

错误跟踪到的用户组件：

function Users(props) {
return (
<ul>
{props.items.map((user) => (
<div>
{user.name} - {user.age}
</div>
))}
</ul>
);
}
export default Users;

Answer 1

我猜您错过了将项目道具传递给用户，或者您应该重命名userData属性。

<Users items={userDB} />

Answer 2

你传递的东西最终会进入道具

此处

<Users userData={userDB} />

所以props只包含userData对象

所以不是

{props.items.map((user) => (...)

使用

{props.userData.map((user) => (...)