Reactjs рендеринг дважды

Question

В моем проекте activjs компонент отображается дважды.если я удаляю componentDidMount, проблема исправлена.Но мне это нужно в моем проекте.Я попробовал решения в Интернете, но не смог.

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

Home.js

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

https://codesandbox.io/s/wyjk931z6l

console.log работает на Home.js дважды.

Answer 1

Компонент You повторно визуализируется, поскольку вызов API, который вы выполняете в componentDidMount, приводит к успешному выполнению setState.Из-за этого дочерние компоненты также проходят повторную визуализацию, даже если их реквизиты не изменились.Чтобы избежать этого, вы можете написать дочерний компонент, расширив React.PureComponent, который реализует shouldComponentUpdate путем поверхностного сравнения реквизита и состояния.

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

Рабочая демонстрация

Answer 2

Если вы не хотите, чтобы Home повторно отображал, когда это делает приложение, попробуйте внедрить shouldComponentUpdate в компоненте Home.

shouldComponentUpdate(){
return false;
}