React Pemasangan Komponen Dua Kali

Di dalam sebagian kecil aplikasi React/Redux/ReactRouterV4 saya, saya memiliki hierarki komponen berikut,

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

Di dalam turunan Exhibit, ada sekitar 6 kemungkinan rute berbeda yang dapat dirender juga. Jangan khawatir, saya akan menjelaskannya dengan beberapa kode.

Inilah Komponen Pameran Induk saya:

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

Pada dasarnya, semua tugasnya adalah menampilkan salah satu subkomponen pameran, dan mengatur gambar latar belakang.

Berikut adalah salah satu subkomponennya, 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>
    )
  }
}

Untuk mengurangi pengetikan, saya memutuskan untuk membungkus komponen dalam Komponen Tingkat Tinggi, yang tujuannya adalah untuk mengirimkan tindakan yang akan mengatur gambar latar belakang yang tepat pada komponen induk Pameran tingkat atas.

Ini adalah Komponen Tingkat Tinggi:

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

Pada pemuatan awal ExhibitOne, saya dapat melihat bahwa pembuat tindakan setBackgroundImage dijalankan dua kali dengan melihat Redux Logger di konsol. Kecenderungan awal saya untuk menggunakan komponenDidMount adalah karena menurut saya menggunakannya akan membatasi pembuat tindakan untuk mengeksekusi hanya sekali. Berikut tangkapan layar lognya:

Saya pikir saya mungkin salah memahami cara kerja Komponen Tingkat Tinggi, atau mungkin itu semacam React Router V4? Bagaimanapun, bantuan apa pun akan sangat dihargai mengapa ini dilakukan dua kali.