Question

Portal 组件被调用了两次。

为什么会这样？

我该如何预防？

index.js

const App = () => {
  const theme = lightTheme;

  return (
    <Provider store={store}>
      <StyleSheetManager>
        <ThemeProvider theme={theme}>
          <BrowserRouter>
            <Portal />
          </BrowserRouter>
          <GlobalStyle />
        </ThemeProvider>
      </StyleSheetManager>
    </Provider>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

Portal.jsx

class Portal extends React.Component {
  isAuthenticated = () => {
    if (this.props.tokenized) {
      return (
        <React.Fragment>
          <Sidebar />
          <MainContainer />
          <Switch>
            <Route exact path="/"></Route>
          </Switch>
        </React.Fragment>
      );
    } else {
      return <Authorize />;
    }
  };

  render() {
    this.props.dispatch(checkToken());
    return (
      <React.Fragment>
        <Alerts />
        {this.isAuthenticated()}
      </React.Fragment>
    );
  }
}

export default connect(
  ({ authenticator }) => ({
    tokenized: authenticator.tokenized,
  }),
  null
)(Portal);

Answer 1

这种情况发生在您在每次渲染时分派操作时，redux 状态可能在第一次分派调用后更新。

当您的 Portal 首次呈现时，您会调度 checkToken()，它可能会检查令牌并更新 authenticator.tokenized。由于您的组件连接到商店以将状态映射到道具，您的道具 tokenized 带有一个新值，因此会导致重新渲染。但是，渲染这个特定组件的两次并不是错误的，因为令牌只能在一段时间后（在组件的第一次渲染之后）才可用。

您应该记住该组件，以便您可以使用以前的道具检查传入的道具，以避免不必要的重新渲染。

此外，您的 checkToken 调用应仅在组件加载时（在 componentDidMount 中）发生一次，而不应在每次渲染方法执行时发生。

React 组件被调用两次

1 个答案: