reactjs - ReactJs:将数据获取代码或副作用移动到 componentDidUpdate
问题描述
我收到以下警告,但我不知道这意味着哪些数据更改,你知道吗?
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See react-unsafe-component-lifecycles for details.
* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at:
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: t
代码:
import React, { Component } from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import FacebookLogin from "react-facebook-login";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
// import this
import { withStyles } from "@material-ui/core/styles";
// make this
const styles = theme => ({
root: {
flexGrow: 1
},
menuButton: {
marginRight: theme.spacing(2)
},
title: {
flexGrow: 1
}
});
class App extends Component {
state = {
accessToken: "",
isLoggedIn: false,
userID: "",
name: "",
email: "",
picture: ""
};
responseFacebook = response => {
this.setState({
accessToken: response.accessToken,
isLoggedIn: true,
userID: response.userID,
name: response.name,
email: response.email,
picture: response.picture.data.url
});
};
handleClick = event => this.setState({ anchorEl: event.currentTarget });
handleClose = () => {
this.setState({ anchorEl: undefined });
};
handleCloseAndLogOut = () => {
this.setState({ anchorEl: undefined });
this.setState({ isLoggedIn: undefined });
this.setState({ userID: undefined });
this.setState({ name: undefined });
this.setState({ email: undefined });
this.setState({ picture: undefined });
};
componentDidMount() {
document.title = "Tiket.hu";
}
componentDidUpdate() {
// What put here?
}
render() {
let fbContent;
let listContent;
//const { anchorEl } = this.state;
if (this.state.isLoggedIn) {
fbContent = (
<div>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={this.handleClick}
>
{this.state.name}
</Button>
<Menu
id="simple-menu"
anchorEl={this.status.anchorEl}
keepMounted
open={Boolean(this.status.anchorEl)}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleCloseAndLogOut}>Log out</MenuItem>
<MenuItem onClick={this.handleClose}>
Switch mode to Release
</MenuItem>
<MenuItem onClick={this.handleClose}>My tickets</MenuItem>
</Menu>
</div>
);
} else {
let fbAppId;
if (
window.location.hostname === "localhost" ||
window.location.hostname === "127.0.0.1"
)
fbAppId = "402670860613108";
else fbAppId = "2526636684068727";
fbContent = (
<FacebookLogin
appId={fbAppId}
autoLoad={true}
fields="name,email,picture"
onClick={this.componentClicked}
callback={this.responseFacebook}
/>
);
}
return (
<div className="App">
<AppBar position="static">
<Toolbar>
<Typography variant="h6" className={this.props.classes.title}>
Tiket.hu
</Typography>
<Button color="inherit">Search</Button>
<Button color="inherit">Basket</Button>
{fbContent}
</Toolbar>
</AppBar>
{listContent}
</div>
);
}
}
export default withStyles(styles)(App);
解决方案
您显示的组件没有 componentWillReceiveProps,所以这不是问题。错误消息包括:
请更新以下组件:t
所以我们正在寻找一个名为t
. 如果你有一个同名的,那就是你需要修复的那个。但我的猜测是,这不是您的组件之一,而是您导入的库之一间接使用的组件。如果是这种情况,只有库创建者才能解决此问题,然后您将导入其代码的新版本。
此警告不会阻止您的代码使用当前版本的 react 运行,但会阻止您升级到 react 版本 17(尚不存在)
推荐阅读
- javascript - 如果视频源为空,如何通过 jQuery 隐藏 div?
- python - SexMachine 安装 - UnicodeDecodeError: 'charmap' 编解码器无法在位置解码字节
- html - ttf字体文件在本地网站上不起作用
- arduino - platform.io 中的 Arduino 项目
- php - 购物车中未显示运费总额 - WooCommerce
- google-colaboratory - 谷歌 colab 私人细胞。师生模式
- php - Laravel 电子邮件日志通道
- html - 如何在 jQuery Mobile 中编辑上传文件小部件的占位符?
- html - 具有 flex 的可滚动元素随着它的增长将其他元素推出
- schema.org - 用于网站评级/评论的 Google Schema 标记不起作用