在类 Component 的函数中调用 componentDidMount

Question

In my react application, I have a courseslist and the user can Deactivate a course.

After deactivating I wanted to re-render my courselist component to update the course status to "Inactive" from "Active" without using forceUpdate() or this.setState() as both didn't work and forceUpdate() is not recommended too.

I am getting the course Info in my componentDidMount() .

So after when the course status changes I called this.componentDidMount() inside my updatedCourseStatus() function and It's working.

I just wanted to know if this approach have any bad effect on the application or any other approach to re-render the component better than this.

Here is my CourseList Component:

state = {
  pageLoading: true,
  courses: '',
  totalCourses: 0
};

componentDidMount() {
  fetch('url')
    .then(res => {
      if (!res.ok) throw res;
      return res.json();
    })
    .then(resData => {
      this.setState({
        courses: resData.courses,
        totalCourses: resData.totalCourses,
        pageLoading: false
      });
    })
    .catch(err){}
    });
}

onDisableCourse = id => {
  fetch(url)
    .then(res => {
      if (!res.ok) throw res;
      return res.json();
    })
    .then(resData => {
      console.log(resData);
      this.componentDidMount();
    })
    .catch(err){};
};

I want to use the data that I am getting from componentDidMount() not from onDisableCourse() ;

So I cannot do this.setState({courses: resData.updatedCourses}) ;

Answer 1

我认为您应该使用componentDidUpdate()函数而不是componentDidMount() ，因此您不必在onDisableCourse()调用该函数。

Answer 2

this.setState should work perfectly.If it ain't working , it means you might have inhereted PureComponent instead of Component , or returned false in shouldComponentDidUpdate()

even then you may do something like this

fetchInfo = () => {
   fetch('url')
    .then(res => {
      if (!res.ok) throw res;
      return res.json();
    })
    .then(resData => {
      this.setState({
        courses: resData.courses,
        totalCourses: resData.totalCourses,
        pageLoading: false
      });
    })
    .catch(err){}
    });
}

componentDidMount = () => {
  this.fetchInfo()
}

onDisableCourse = id => {
 this.fetchInfo()
};