React:无法在尚未安装的组件上调用 setState

我正在使用 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 });

  }



作为参考,我已经在 GitHub 上上传了我的整个项目: https: //github.com/mohnishm/Todo-App-in-React 如何摆脱这个警告?



倚天杖
浏览 123回答 2
2回答

猛跑小猪

componentDidMount您正在构造函数中调用生命周期方法,您不应该那样做。这是问题所在:this.componentDidMount = this.componentDidMount(this);如果您在 中执行此操作constructor,您会收到该警告,React 会告诉您该组件尚未安装,但您已经setState通过手动调用componentDidMount.在您的情况下,构造函数尚未完成执行,并且组件没有机会安装到 DOM 上。一旦构造函数被执行,组件就被初始化,然后组件被实际挂载到 DOM 上。安装组件后,你的生命周期方法componentDidMount将由 React 以适当的上下文调用(因此不需要调用bindon componentDidMount),然后在那个时间点你应该调用setState来改变组件的状态。您也可以删除_isMounted与该财产形式相关的 和检查componentDidMount,componentWillUnmount因为它不是必需的。

斯蒂芬大帝

componentDidMount 是一种生命周期方法,不需要在构造函数中进行初始化。删除它以避免警告。  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); // remove this, componentDidMount is a lifecycle method.  }
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript