javascript - 页面重新加载后无法从 redux 存储中获取数据

问题描述

我成功地创建了一个名为market（父组件）的组件，它在组件安装到屏幕时通过调度的操作从我的 firestore 数据库中获取数据，以便将数据库的内容存储在我的 redux 存储中。我现在从 redux 存储中检索我的数据并将它们映射到名为CardItem的子组件中，当被选中时，获取所选项目的 id 并将其传递给路由参数，并将我推送到名为User的路由。我现在将用户路由连接到我的 redux 存储，目的是从中提取数据并使用通过路由参数传递的 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)

标签： javascriptreactjsreduxreact-redux

解决方案

这是因为您的应用程序中有路由数据依赖于其他互斥的路由。

换句话说，这归结为您的应用程序架构，您的应用程序逻辑在错误的位置，或者您的路由结构应该更改

从广义上讲，在我看来，您有两种选择。

制作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道具类似于：

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处理您的应用程序控制流，但这完全是另一个考虑/问题

希望有帮助

javascript - 页面重新加载后无法从 redux 存储中获取数据

问题描述

解决方案

推荐阅读