頁面重新加載后無法從Redux存儲中獲取數據

Question

我成功創建了一個稱為市場的組件（父組件），該組件在安裝到屏幕上時通過調度的動作從Firestore數據庫中獲取數據，以便將數據庫的內容存儲在我的redux存儲中。 現在，我從redux存儲中檢索了數據，並將其映射到名為CardItem的子組件中，該子組件被選中時，將獲取所選項目的ID，並將其通過路由參數傳遞，還將我推送到名為User的路由。 現在，我將用戶路由連接到我的redux存儲，目的是從其中提取數據並過濾通過route參數使用傳遞的id選擇的用戶，以便在componentDidMount（）生命周期方法中設置狀態。 在嘗試重新加載路由之前，我的邏輯是成功的，然后使我的redux存儲中的數據消失了（第一次重新加載后，狀態返回未定義）。

任何對此的見解都受到高度贊賞，我是否比通過其他操作向數據庫進行分配並隨后進行過濾更好地從redux存儲中提取數據並使用通過路由參數傳遞的id來過濾用戶？

以下是市場（父組件）和嵌套的用戶（子組件）路線。

市場組成

...

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>

您的應用程序路線將如下嵌套，並呈現為頂級market路線的children級，並可以訪問它在ComponentWillMount請求的數據

/market/user

/market/card-items

並且您的MarketContainer渲染方法將使children道具類似於以下內容：

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

2. 使用redux-saga類的副作用庫來處理您的應用程序控制流，但這完全是另一個考慮/問題

希望能有所幫助