在类组件的函数中调用 componentDidMount答案

【问题标题】：Calling componentDidMount inside a class Component's function在类组件的函数中调用 componentDidMount
【发布时间】：2020-03-07 06:28:30
【问题描述】：

在我的反应应用程序中，我有一个课程列表，用户可以停用课程。

停用后，我想重新渲染 mycourselist 组件，以在不使用 forceUpdate() 或 this.setState() 的情况下将课程状态从“活动”更新为“非活动”，因为两者都不起作用而 forceUpdate() 不是也推荐。

我在componentDidMount() 中获取课程信息。

因此，当课程状态发生变化后，我在 updatedCourseStatus() 函数中调用了 this.componentDidMount() 并且它正在工作。

我只是想知道这种方法是否对应用程序有任何不良影响，或者是否有任何其他方法可以比这更好地重新渲染组件。

这是我的 CourseList 组件：

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){};
};

我想使用从componentDidMount() 而不是onDisableCourse() 获得的数据；

所以我不能this.setState({courses: resData.updatedCourses});

【问题讨论】：

setState 不起作用是什么意思？您是否尝试直接更新阵列？因为它不会起作用。您需要使用 array.map 函数生成一个新数组并将其传递给 setState。
这就是我不想做的。我从 resData 得到的不包含我想要更新的数据，因为它没有被填充，并且我在 componentDidMount 中得到填充的数据。我可以在我的服务器中的 resData 中实现填充，但我不想这样做。所以 resData 中的 setState() 不会有我需要的所有必需数据。
我也用了 this.setState(this.state) 也没用。
手动调用componentDidMount不是个好主意。相反，您可以编写另一个函数并在 componentDidMount 和其他您想要的地方调用它。这种方法会更整洁。
可以使用单独的函数来调用componentDidMount。但是为什么手动componentDidMount不好呢？

标签： javascript reactjs jsx

【解决方案1】：

我认为您应该使用componentDidUpdate() 函数而不是componentDidMount()，这样您就不必在onDisableCourse() 中调用该函数。

【讨论】：

好的，只有当我同时使用 componentDidMount() 和 componentDidUpdate() 并在这两个函数中获取数据时才有效。如果我不使用 componentDidMount()，它就不起作用。所以现在我在这两个函数中都使用了 fetch 。也许我需要使用单独的函数来获取。
你能告诉我为什么我不应该在另一个函数中手动使用componentDidMount。
哦，我刚刚查看了我的 API 服务器，它不断收到课程请求。我认为 componentDidUpdate 不断发送请求以检查是否有更新，因为我在 componentDidUpdate 中使用 fetch。这不好。
你应该小心使用componentDidUpdate，通常你应该做一个if检查以防止在每次更新时发送请求。我不知道为什么你不应该在另一个函数中使用componentDidMount，它对我来说似乎不是专业代码。有关更多详细信息，您可以查看生命周期方法的源代码。
谢谢，我去看看

【解决方案2】：

this.setState 应该可以正常工作。如果它不起作用，则意味着您可能继承了PureComponent 而不是Component，或者在shouldComponentDidUpdate() 中返回了false

即使那样你也可以这样做

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()
};

【讨论】：

可行，但我需要知道为什么我不能在任何其他函数中手动调用 componentDidMount()？
因为它是一个生命周期钩子。它将由 react 自己处理。让反应来掌舵
好的，没关系，但如果我在另一个函数中手动调用任何生命周期方法，我对我的应用程序的任何副作用感兴趣。