Reagieren Die Bestückung Zweimal

Innen einen kleinen Teil meiner Reagieren/Redux/ReactRouterV4 Anwendung, ich habe folgende Komponente Hierarchie,

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

Innerhalb der Kinder Zeigen, es gibt über 6 verschiedene mögliche Routen, die gerendert werden kann als gut. Keine Sorge, ich werde erklären, mit dem code.

Hier ist meinen Eltern zu Zeigen Komponente:

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

Grundsätzlich alle seine macht, für seine Arbeit ist die Darstellung eines der Exponate Unterkomponenten, und legen Sie ein Hintergrundbild.

Hier ist einer der Unterkomponenten, 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>
    )
  }
}

Um zu schneiden nach unten auf die Eingabe, habe ich beschlossen, wickeln Sie die Komponenten in eine Höhere Ordnung, die Komponente, deren
Zweck ist die Versendung einer Aktion, die richtige Hintergrundbild für die top-level Aufweisen übergeordneten Komponente.

Dies ist die übergeordnete Komponente:

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

Beim erstmaligen laden der ExhibitOne, ich kann sehen, dass die setBackgroundImage Aktion Ersteller führt zweimal durch auf der Suche
bei Redux-Logger in der Konsole. Meine erste Neigung, die Verwendung componentDidMount war, weil ich dachte, es zu benutzen
begrenzen würde die Aktion creator nur einmal ausführen. Hier ist ein screenshot von der log:

Reagieren Die Bestückung Zweimal

Ich glaube, ich könnte Missverständnisse, wie Höhere Ordnung, die mit Komponenten arbeiten, oder vielleicht irgendeine Art von Reagieren Router V4 Ding?
Wie auch immer, jede Hilfe wäre sehr geschätzt werden, warum dies geschieht zweimal.

InformationsquelleAutor Dan Zuzevich | 2018-03-01
Schreibe einen Kommentar