Question

我正在从db中删除一条记录，为此，我正在调用API。当我收到一个 API删除成功后，我需要像重新加载一样重新渲染所有组件。我尝试了this.forceUpdate和shouldComponentAgain的尝试，但是没有运气。

我也尝试过使用componentDidUpdate，它可以工作，但是它无限次地调用API。以下是我使用componentDidUpdate的代码：

componentDidUpdate(){
  let newThis = this;
  getAccounts().then(function(response){
    if(response.status===200){
      newThis.setState({
        Accounts:response.data
      })
    }
  });
}

请告诉我重新渲染的方法，就像重新加载一样，但不要重新加载整个页面。

Answer 1

使用componentDidUpdate时，应该始终有一个条件setState，这表示您需要执行某些操作，因为当前状态或当前道具不等于先前状态或道具。

每当组件更新时，总是会调用

componentDidUpdate。在您的情况下，正在发生的情况是您正在调用setState而没有任何条件会更新组件，并且再次调用setState会导致更新组件的无限循环。

您应该在此处进行如下检查：

componentDidUpdate(prevProps, prevState){
  let newThis = this;
  if(newThis.props.{some-variable} !== prevProps.{some-variable}) {
    getAccounts().then(function(response){
    if(response.status===200){
      newThis.setState({
        Accounts:response.data
      })
    }
  });
 }
}

在此处添加条件setState非常重要，否则您将陷入无限循环。

也根据官方文档：

您可以在componentDidUpdate（）中立即调用setState（），但请注意必须将其包裹在一定条件下，否则将导致无限环。这也将导致额外的重新渲染，而不会对用户可见，会影响组件的性能。如果你是试图将某些状态“镜像”到来自上方的道具，考虑直接使用道具。

希望有帮助。

Answer 2

如果要再次渲染组件，请从父级更改道具。如果道具更改，则子组件将自动渲染。通过此功能，您还可以渲染选择性组件。

重新渲染组件而不设置状态react js

2 个答案: