反应:无法调用尚未安装的组件上的setState

莫希尼M

我正在使用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会被调用用适当的环境做出反应(所以没有必要要求bindcomponentDidMount),然后在那个时间点,你应该打电话setState来改变组件的状态。

此外,您也可以删除_isMounted与该属性表单相关的componentDidMount和,componentWillUnmount因为这不是必需的。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法在已卸载的组件上调用setState(或forceUpdate)

React-未安装组件上的setState()

无法在尚未调用Looper.prepare()的线程上敬酒

如何删除警告“无法在未安装的组件上执行反应状态更新”

componentDidMount:无法在已卸载的组件上调用setState(或forceUpdate)

警告:无法在React Native中的未安装组件上调用setState(或forceUpdate)

无法在已卸载的组件上调用setState(或forceUpdate)。反应

在setState之后反应更新组件

无法在React Native中使用Firebase Auth调用已卸载组件上的setState

反应:从另一个组件调用setState

反应警告:无法在已卸载的组件上调用setState(或forceUpdate)

反应应用程序。无法在尚未安装的组件上调用setState

反应-防止所有子组件安装在负载上

我不明白我的React警告“无法在未安装的组件上调用setstate”来自何处

警告:无法在未安装的组件上执行反应状态更新

无法针对未安装的组件错误执行反应状态更新

无法在屏幕上居中反应组件

渲染前的设置状态-无法在尚未安装的组件上调用setState

反应setstate在循环上无法正常工作

无法在尚未使用事件监听器安装的组件上调用setState

React Native,“未安装组件上的setState()”警告

无法在componentDidMount中的setState上调用回调函数?-反应

在未安装的组件上调用 setState()

反应,已安装/未安装组件的 setState 警告

即使在 componentDidMount 之后,也无法在未安装的组件上调用 setState

无法在未安装的组件上设置状态

在尚未安装的组件上收到名为 Can't call setState 的警告

无法在子组件反应中调用道具功能

警告:无法在尚未安装的组件上调用 setState。调用 API 时