Question

我成功创建了一个名为 market 的组件（父组件），该组件在安装到屏幕上时通过调度的动作从Firestore数据库中获取数据，以使数据库内容存储在我的redux商店中。现在，我从redux存储中检索了数据，并将其映射到名为 CardItem 的子组件中，该子组件被选中时，将获取所选项目的ID，并将其传递给route参数，还将我推送到名为< strong>用户。现在，我将用户路由连接到我的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)

用户组件 ... 类User扩展了组件{

    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

这是因为您的应用程序中具有与其他互斥的路由具有数据相关性的路由。

换句话说，这取决于您的应用程序体系结构，在该体系结构中，您的应用程序逻辑位于错误的位置或应该更改路由结构

在我看来，您有两种选择。

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

希望有帮助

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

1 个答案: