React 组件安装两次

在我的 React/Redux/ReactRouterV4 应用程序的一小部分中，我有以下组件层次结构，

- Exhibit (Parent)
-- ExhibitOne
-- ExhibitTwo
-- ExhibitThree

在 Exhibit 的子级中，还可以渲染大约 6 种不同的可能路线。别担心，我会用一些代码来解释。

这是我的家长展览组件:

export class Exhibit extends Component {
  render() {
    const { match, backgroundImage } = this.props

    return (
      <div className="exhibit">
        <Header />
        <SecondaryHeader />

        <div className="journey"
          style={{
            color: 'white',
            backgroundImage: `url(${backgroundImage})`,
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center-center'
          }}>

          <Switch>
            <Route path={`${match.url}/exhibit-one`} component={ExhibitOne} />
            <Route path={`${match.url}/exhibit-two`} component={ExhibitTwo} />
            <Route path={`${match.url}/exhibit-three`} component={ExhibitThree} />
            <Redirect to="/" />
          </Switch>
        </div>
      </div>
    )
  }
}

基本上，它的所有工作就是显示展品子组件之一，并设置背景图像。

这是子组件之一 ExhibitOne：

export default class ExhibitOne extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { match } = this.props

    return (
      <div className="exhibit-one">
        <Switch>
          <Route path={`${match.url}/wall-one`} component={ExhibitHOC(WallOne)} />
          <Route path={`${match.url}/wall-two`} component={ExhibitHOC(WallTwo)} />
          <Route path={`${match.url}/wall-three`} component={ExhibitHOC(WallThree)} />
          <Route path={`${match.url}/wall-four`} component={ExhibitHOC(WallFour)} />
          <Route path={`${match.url}/wall-five`} component={ExhibitHOC(WallFive)} />
          <Route path={`${match.url}/wall-six`} component={ExhibitHOC(WallSix)} />
        </Switch>
      </div>
    )
  }
}

为了减少输入，我决定将组件包装在高阶组件中，其 目的是调度一个操作，该操作将在顶级展示父组件上设置正确的背景图像。

这是高阶组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions/wall-background-image'

export default function(ComposedComponent) {
  class ExhibitHoc extends Component {

    componentDidMount = () => this.props.setBackgroundImage(`./img/exhibit-one/${this.getWall()}/bg.jpg`)

    getWall = () => {
      // this part isnt important. it is a function that determines what wall I am on, in order to set
      // the proper image.
    }

    render() {
      return <ComposedComponent />
    }
  }

  return connect(null, actions)(ExhibitHoc);
}

在 ExhibitOne 的初始加载中，我可以看到 setBackgroundImage 操作创建者通过查看执行了两次 在控制台中的 Redux Logger 处。我最初倾向于使用 componentDidMount 是因为我认为使用它 将限制动作创建者只执行一次。这是日志的屏幕截图：

我想我可能误解了高阶组件的工作原理，或者可能是某种类型的 React Router V4 的东西？ 无论如何，任何关于为什么执行两次的帮助将不胜感激。

在 2020 年，这是由于<React.StrictMode>包裹在周围的组件<App />在新版本的 Create React App 中。从中删除有问题的组件index.js修复了我所有组件的双重安装问题。这是设计使然，但是对于所有内容都看到两次 console.log() 是令人烦恼和误导的。

对于 Next.js，在next.config.js, set reactStrictMode:false.