Невозможно получить данные из избыточного хранилища после перезагрузки страницы

Question

Я успешно создал компонент с именем market (родительский компонент), который извлекает данные из моей базы данных firestore с помощью отправленного действия, когда компонент монтируется на экран, чтобы хранить содержимое моей базы данных.в моем магазине редуксов.Теперь я извлек свои данные из хранилища избыточных данных и сопоставил их с дочерними компонентами с именем CardItem , который при выборе принимает идентификатор выбранного элемента и передает его через параметры маршрутов, а также подталкивает меня к маршруту, называемому * 1005.* Пользователь .Теперь я подключаю маршрут пользователя к моему хранилищу редуксов с намерением извлечь из него данные и отфильтровать пользователя, выбранного с использованием переданного идентификатора, через параметр маршрута, чтобы установить состояние в методе жизненного цикла componentDidMount () ,Моя логика была успешной до тех пор, пока я не попытался перезагрузить маршрут, что затем привело к исчезновению данных в моем хранилище избыточных данных (состояние вернулось неопределенным после первой перезагрузки).

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

Ниже представлен и рыночный (родительский компонент), и вложенный пользовательский (дочерний компонент) маршрут.

рыночный компонент

...

class market extends Component{

    componentDidMount = () => {
      this.props.fetch()
    //   console.log(this.props.data)
    };

    // state={
    // }
    userSelectHandler= (id)=> {
        this.props.history.push({pathname: '/user/'+ id})
    }

    render(){
        let list=null

        if(this.props.loading){
            list=(<Spinner/>)
        }

        if(this.props.data){
            list=(
                this.props.data.map((data)=>(
              <CardItem userSelect={()=>this.userSelectHandler(data.id)} key={data.id} data={data}/> ))
            )
        }

        return (
            <section>
            <SearchBar/>
            {list}

        </section>
        )
    }
}


const mapStateToProps= state=> {
    return{
        data: state.market.data,
        loading: state.ui.loading
    }
}

const mapDispatchToProps= dispatch=>{
    return{
        fetch: ()=>dispatch(fetchData())
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(market)

Пользовательский компонент ... класс Пользователь расширяет компонент {

    componentDidMount= ()=>{
        let copyData= [...this.props.user]
        copyData= this.props.user.filter(user=> user.id === +this.props.match.params.id)
       console.log(copyData[0])
       this.setState({
           user: copyData[0]
       })
    }

   state={
       user:null
   }

   componentDidUpdate= ()=> {
       console.log('will update')
       console.log(this.props.user)
   }


    render(){

        let card = (<Spinner/>)
        if(this.state.user){
            card=(
                <article  className={classes.CardBox}>
            <aside className={classes.CardBox_profDetails}>
            <p>{this.state.user.name}</p>
            <p></p>
            </aside>

            <aside className={classes.CardBox_pricingDetails}>
            <p>{this.state.user.rate}/rmb</p>
            <p>{this.state.user.range}rmb</p>
            </aside>
        </article>
            )
        }

        return(
            <>
              {card}
            </>

        )
    }
}


const mapStateToProps= state => {
    return{
        user: state.market.data
    }
}

export default connect(mapStateToProps)(User)

Answer 1

Это потому, что в вашем приложении есть маршруты, которые имеют зависимости данных от других маршрутов, которые являются взаимоисключающими.

Другими словами, это сводится к архитектуре вашего приложения, в результате чего логика вашего приложения невернаместо или ваша структура маршрутизации должна быть изменена

В общем, у вас есть два варианта, как я вижу.

1. Сделать market маршрут верхнего уровня и оба user и cardItem дети рынка.Например, используя React Router v3, структура вашего маршрута может выглядеть примерно так:

<Route path="market" component={MarketContainer}>
   <Route path="user" component={UserContainer} />
   <Route path="card-item" component={CardItemContainer} />
</Route>

Маршруты вашего приложения будут вложены следующим образом и будут отображаться как children верхнего уровня marketМаршрут с доступом к данным, которые он запрашивает на ComponentWillMount

/market/user

/market/card-items

, и ваш MarketContainer метод рендеринга будет отрисовывать children propпохож на:

render() {
    const { loading, children } = this.props;

    if (loading) {
      return <Spinner/>;
    }

    return (
        <section>
          <SearchBar/>
          {children} // your children would be able to access to data in the redux store and handle rendering themselves
        </section>
    );
}

Используйте библиотеку побочных эффектов, такую ​​как redux-saga, для управления потоком управления приложением, но это совсем другое соображение / вопрос

Надеюсь, что поможет