Как исправить дублирование / удаление данных при нажатии кнопок назад / вперед в реагирующем маршрутизаторе

Question

Я создаю движущееся веб-приложение со следующими отношениями: У ПОЛЬЗОВАТЕЛЯ есть много ДВИЖЕНИЙ -> У ДВИЖЕНИЯ есть много ЯЩИК -> В КОРОБКЕ есть много ЭЛЕМЕНТОВ.

У меня есть функционал, работающий так, что, когда вы нажимаете на конкретный MOVE, вы перенаправляетесь в список всех ящиков, связанных с этим MOVE.

Однако, если я нахожусь на странице списка КОРОБК и нажимаю обратно на страницу списка ДВИЖЕНИЙ, мои ДВИЖЕНИЯ дублируются. И точно так же, когда я возвращаюсь в конкретный MOVE, мои КОРОБКИ дублируются. И в некоторые моменты, если я делаю полное обновление страницы, мои данные либо 1. Полностью исчезают (то есть, возможно, componentDidMount () не работает при обновлении страницы?) ИЛИ 2. мое приложение разрывается и получает эту ошибку: «Неверная попытка распространять не повторяемый экземпляр ".

Моя цель - просто обеспечить правильную работу функций «назад» и «вперед», чтобы мои данные монтировались один раз и оставались неизменными.

Я попытался исправить проблему в моем методе componentDidMount () внутри моего компонента MoveList и BoxList. Я просмотрел несколько постов об истории браузера и попробовал следующее, чтобы ограничить мой componentDidMount () ОДИН РАЗ. componentDidMount() { if (this.props.history.action === "POP") { this.props.getMoves(this.props.user.user_id) } }

MoveList.js

import React from 'react';
import { connect } from 'react-redux';
import { getMoves } from '../actions/moveActions'
import Move from './Move'
import { withRouter } from 'react-router-dom'

class MoveList extends React.Component {

  componentDidMount() {
    if (this.props.history.action === "POP") {
      this.props.getMoves(this.props.user.user_id)
    }
  }

  render() {

    const mappedMoves = this.props.moves.map((move) => {

  return <Move move={move} key={move.id} />
})

return (
  <div className="row">
      {mappedMoves}
  </div>
)
  }
        }  


const mapStateToProps = (state) => {

  return {
    moves: state.moves,
    user: state.user
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getMoves: () => dispatch(getMoves())
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MoveList));



BoxList.js (u click a Move to see this box list)

import React from 'react';
import Box from './Box';
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux';
import { getBoxes } from '../actions/boxActions'

class BoxList extends React.Component {

  componentDidMount() {
    if (this.props.history.action === "PUSH") {
      this.props.getBoxes(this.props.user.user_id, this.props.move.id)
    }
  }

  render() {
    console.log("boxlist props", this.props.history);

    const mappedBoxes = this.props.boxes.map((box, idx) => {
      return <Box box={box} key={box.id} idx={idx}/>
    })

    return (
      <div className="col s9">
          {mappedBoxes}
      </div>
     )
  }
}

const mapStateToProps = state => {
  return {
    move: state.move,
    boxes: state.boxes,
    user: state.user
  }
}

const mapDispatchToProps = dispatch => {
  return {
    getBoxes: (userId, moveId) => dispatch(getBoxes(userId, moveId))
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(BoxList))

Ожидаемый результат происходит при первой загрузке. Однако, если я нажимаю взад-вперед, данные либо дублируются, либо исчезают. Вот мой роутер:

class App extends Component {
  render() {
    return (
      <Fragment>
        <div className="App">
          <NavBar />
          <Switch>
            <Route exact path="/moves" component={MoveContainer} />
            <Route path="/boxes" render={(props) => <BoxContainer {...props} />} />
          </Switch>
        </div>
      </Fragment>
    );
  }
}

Answer 1

Эта проблема возникает, потому что каждый раз, когда вы возвращаетесь на страницу, компонент повторно собирается, и запускается действие getMoves, добавляя данные в массив, даже те, которые уже есть в нем. Чтобы решить эту проблему, вы можете добавить элементы в ваш массив следующим образом:

    function uniqueData(value, index, self) {
         return self.indexOf(value) === index;
    }

    moves = moves.concat(data).filter(uniqueData);

Как мы видим выше, перемещения массива объединяются с данными массива, которые в этом случае будут ссылаться на данные, которые будут добавлены в перемещения массива, и вскоре после объединения они фильтруются с использованием uniqueData. функция, таким образом удаляя все повторяющиеся данные из массива перемещается.