我正在使用react(MERN stack)创建一个简单的待办事项应用程序。当我尝试同时使用axios和setState调用get API时,会出现以上警告。我经历了栈溢出中的其他线程,但都遇到了同样的问题,但是它们都没有那么有用。我什至尝试弄乱“ isMounted”变量。下面是我的代码...
export default class App extends React.Component{
_isMounted = false;
constructor(props){
super(props);
this.state = {list:[], itemCounter: 0};
this.addItem = this.addItem.bind(this);
this.handleDone = this.handleDone.bind(this);
this.componentDidMount = this.componentDidMount(this);
}
componentDidMount(){
this._isMounted = true;
axios.get(`http://localhost:8000/todo/api/`)
.then(res => {
if(this._isMounted){
const list = res.data;
const unDoneList = list.filter(task => task.done === false)
this.setState({ list: list, itemCounter: unDoneList.length });
}});
}
componentWillUnmount() {
this._isMounted = false;
}
addItem(val) {
axios.post('http://localhost:8000/todo/api/task/', { data: val })
.then(res => {
const itemCounter = this.state.counter + 1;
const updatedList = this.state.list;
updatedList.push({ data: val, done: false });
console.log(res);
console.log(res.data);
this.setState({ list: updatedList, itemCounter: itemCounter });
})
}
handleDone(item){
console.log(item._id)
axios.post(`http://localhost:8000/todo/api/delete/${item._id}`)
.then(() => console.log("Item Deleted."));
let updatedList = this.state.list;
updatedList.forEach(task => {
if(task.id === item.id ){
task.done = true;
}
});
const itemCounter = this.state.itemCounter - 1;
this.setState({ list: updatedList, itemCounter: itemCounter });
}
render(){
return (
<div className="App">
<nav className="panel is-primary light">
<Title itemCount={this.state.itemCounter}></Title>
<Add addItem={this.addItem}></Add>
<Items items={this.state.list} handleDone={this.handleDone}></Items>
</nav>
</div>
);
}
}
作为参考,我已将整个项目上传到GitHub:https : //github.com/mohnishm/Todo-App-in-React如何摆脱此警告?
您componentDidMount
在构造函数内部调用生命周期方法,则不应这样做。
这是问题所在:
this.componentDidMount = this.componentDidMount(this);
如果您在内部执行此操作,constructor
则会收到警告,React会告诉您该组件尚未安装,但您已经setState
通过手动调用进行了调用componentDidMount
。
在您的情况下,构造函数尚未完成执行,并且组件没有机会安装到DOM上。执行完构造函数后,将初始化组件,然后将组件实际安装到DOM上。
与组件安装,您的生命周期方法componentDidMount
会被调用用适当的环境做出反应(所以没有必要要求bind
上componentDidMount
),然后在那个时间点,你应该打电话setState
来改变组件的状态。
此外,您也可以删除_isMounted
与该属性表单相关的componentDidMount
和,componentWillUnmount
因为这不是必需的。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句