如何解决我应该在 React 中为静态/不可变数据使用状态吗?
我必须计算一些东西才能在我的组件中使用它,我想知道我是应该在初始状态下计算它还是在我的状态之外计算它
在我的州内完成的计算示例
constructor(props: UserProfileProps) {
super(props);
this.state = {
id: this.props.route.params.id
userData: usersData.find((user) => user.id === this.state.id);
};
}
在我所在州以外完成的计算示例
constructor(props: UserProfileProps) {
super(props);
this.state = {
id: this.props.route.params.id
};
}
userData = usersData.find((user) => user.id === this.state.id);
解决方法
类组件:
constructor(props: UserProfileProps) {
super(props);
this.state = {
id: this.props.route.params.id
userData: {}
};
}
componentDidUpdate(prevProps) {
const {route} = this.props
if (route.params.id !== prevProps.route.params.id) {
const userData = UsersData.find((user) => user.id === route.params.id
this.setState(userDate)
}
}
功能组件: 如果这是一个繁重的计算,你应该使用 useMemo 钩子。
const userData = (useMemo() => {
return UsersData.find((user) => user.id === id); },[id])
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。