Javascript 反应JS渲染两次

在我的reactjs项目中，组件渲染两次。如果我删除组件didmount，问题就解决了。但我需要它在我的项目中。我在互联网上尝试了这些解决方案，但我做不到

App.js

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: []
    };
  }
  componentDidMount() {
    fetch("https://reqres.in/api/users?page=2")
      .then(res => res.json())
      .then(result => {
        this.setState({
          users: result.data
        });
      });
  }

  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" render={() => <Home />} />
        </Switch>
      </BrowserRouter>
    );
  }
}

导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：[]
};
}
componentDidMount（）{
取回（“https://reqres.in/api/users?page=2")
.then（res=>res.json（））
。然后（结果=>{
这是我的国家({
用户：result.data
});
});
}
render（）{
返回(
} />
);
}
}

Home.js

export default class Home extends Component {
  render() {
    console.log("Render");
    return (
      <div>
        <h1>console.log render twice</h1>
      </div>
    );
  }
}

导出默认类主扩展组件{
render（）{
控制台日志（“呈现”）；
返回(
console.log渲染两次
);
}
}

---

console.log在Home.js上运行两次。

您的应用程序组件重新呈现，因为您在componentDidMount中进行的API调用会导致成功时的setState。因此，即使其道具没有更改，子组件也会进行重新渲染。为了避免这种情况，您可以通过扩展

React.PureComponent

来编写子组件，该组件通过简单比较props和state来实现

shouldComponentUpdate

export default class Home extends PureComponent {
  render() {
    console.log("Render");
    return (
      <div>
        <h1>console.log render twice</h1>
      </div>
    );
  }
}

导出默认类Home扩展PureComponent{
render（）{
控制台日志（“呈现”）；
返回(
console.log渲染两次
);
}
}

---

它将渲染两次，那么有什么问题？这就是api调用的工作原理。请解释为什么您认为多次呈现的组件在某种程度上是不好的。因为这就是React（或任何其他使用屏幕的软件）的工作原理。答案很好，但我们不应该先找出OP认为无问题是问题的原因吗？我担心告诉他们关于

shouldComponentUpdate

可能会鼓励一种不好的做法，首先应该避免。@ChrisG是的，你是对的，但是，我确实试图解释OP代码中到底发生了什么，并建议使用PureComponent而不是自己实现shouldComponentUpdate