如何使用 React Hooks 重写它?

Question

你会如何使用 React Hooks 重写它？

class UsersList extends Component {
componentDidMount() {
this.props.fetchUsers();
}
renderUsers() {
return this.props.users.map(user => {
return <li key={user.id}>{user.name}</li>;
});
}
render() {
return (
<div>
Here's a big list of users:
<ul>{this.renderUsers()}</ul>
</div>
);
}
}

我试图用 React Hooks 重写，但由于某种原因，我没有找回屏幕上渲染的任何用户。

我试过：

const UsersList = ({ users }) => {
useEffect(() => {
fetchUsers();
}, [users]);
const renderUsers = () => {
console.log(users);
return (
<ul>
{users.map(user => (
<li key={user.id}> {user.name} </li>
))}
</ul>
);
};
return <div> {renderUsers()}</div>;

但是我没有在屏幕上呈现任何东西。 请指出我的明显错误是什么？

Answer 1

你几乎是正确的。简单的经验法则是，具有空数组[]的useEffect与componentDidMount/componentWillUnmount相同，因为在空数组中不会有任何变化，因此该函数仅调用一次。此外，还必须将fetchUsers添加到函数定义的属性列表中才能访问它。

const UsersList = ({ users, fetchUsers }) => {
useEffect(() => {
fetchUsers();
}, []);
const renderUsers = () => {
console.log(users);
return (
<ul>
{users.map(user => (
<li key={user.id}> {user.name} </li>
))}
</ul>
);
};
return <div> {renderUsers()}</div>;
}

Answer 2

React Hooks 与我们的功能组件相关联。 钩子是一个函数，可以让你利用反应功能，如状态或生命周期方法。 你必须在要渲染的功能组件中实现 useEffect((。获取数据后，您必须更改状态。

const renderUsers = () => {
const [users,setUsers]=useState([]) // initially set to empty array
useEffect(()=>{
const fetchedUsers=fetchUsers()
if(fetchedUsers){
setUsers(fetchedUsers)}          
},[]) //[] here means fire this func only once
//now your state set to fetched data
return (
<ul>
{users.map(user => (
<li key={user.id}> {user.name} </li>
))}
</ul>
);
};
return <div> {renderUsers()}</div>;
}