反应错误类型错误：无法读取未定义的属性'name'

Question

我正在学习反应，但我被困在一个问题上。我试图获得数组属性在我的Useritem.js文件

这是我的User.js文件

import React, { Component } from 'react'
import Useritems from './Components/Useritems';

const User = () => {
state = {
users: [
{ name: 'David', age: '20', Position: 'developer' },
{ name: 'Francis', age: '20', Position: 'Software Engineer' },
]
}
return (
<div>
{this.state.users.map(user => (
<Useritems user={user} />
))}
</div>
);
}
export default User

这是我的useritem。js文件

import React from 'react'
const Useritems = ({ user: { name, age, job } }) => {
return (
<div>
<h1>{name}</h1>
<h2>{age}</h2>
<h3>{job}</h3>
</div>
)
}
export default Useritems

但是我得到一个错误说属性名称没有定义

Answer 1

您正在使用功能组件(而不是类组件)，因此您不能使用this.state。相反，您需要使用钩子useState来处理您的状态，您可以这样做:

import React, { useState } from "react";
import Useritems from "./Components/Useritems";
const initialUsers = [
{ name: "David", age: "20", Position: "developer" },
{ name: "Francis", age: "20", Position: "Software Engineer" }
];
const Users = () => {
const [users, setUsers] = useState(initialUsers);
return (
<div>
{users.map((user) => (
<Useritems key={user.name} user={user} /> // don't forget the key, though will want to find something more unique than name!
))}
</div>
);
};