（反应）动态网址，无法呈现我想要的数据答案

【问题标题】：(react) Dynamic URLs, can't render the data I want（反应）动态网址，无法呈现我想要的数据
【发布时间】：2019-09-20 15:09:02
【问题描述】：

我快到了，但仍然无法将数据发送给我。

我的数据组件呈现博客文章列表，我的路由器针对索引和标题

//Blockblock.js
const blogData = this.state.blogData.map((value) =>
            value.map((val, idx) =>                                                       
                <BlogBlock 
                    link={val.title.toString().toLowerCase().split(" ").join("-")} 
                    title={val.title}
                    subtitle={val.subtitle}
                    thumb={val.thumb}
                    idx={idx}
                />            
            )
        )  

//Blockblock.js
const BlogBlock = (props) => {                
    return (
        <div className={`blog-post post-${props.idx}`}>            
            <Link to={`blog/${props.idx}/${props.link}`}>
                <Img loader={<span className="loading-img">loading....</span>} src={`http://brittdepetter.com/images/${props.thumb}`} alt={props.title} />
                <h3>{props.title}<span><br />{props.subtitle}</span></h3>
            </Link>  
        </div>                        
    )   
}
//app.js
<Route path='/blog/:blogId/:blogTitle' component={BlogPost} />

最后我有了我的 blockpost 组件，我正在匹配 URL，但是我如何传递道具来呈现图像等数据？

BlockPost.js
const BlogPost =({match, location}) => {                   
    const { params:{ blogId, blogTitle } } = match;
    return (                          
        <div>                                        
            <h2>{ props.title }</h2> 
            <div className="textBox boxImg">
                <div className="story-img-box">
                    { props.imgsrc }
                </div>            
                <div>
                    {console.log(props)}
                    {props.body}
                </div>
            </div>
        </div>            
    )   
}
```

【问题讨论】：

标签： javascript node.js reactjs frontend

【解决方案1】：

如果您尝试将额外的 props 从 BlogBlock 传递到 BlogPost，如果没有像 Redux 这样的某种状态管理，这两个组件都可以使用共享状态是不可能的。

我建议基于 blogId 内部 BlogPost 组件重新获取您的博客，因为您需要处理直接访问（如果用户通过在 url 中输入而不是从 @ 直接导航到 /blog/:blogId/:blogTitle 987654327@) 无论如何。另一种选择是仅在直接访问时重新获取，否则使用来自共享状态的数据（基于从BlogBlock 中选择的将存储在该状态下的数据）。

【讨论】：

那么，如果我重新获取 blogPost 上的数据，我该如何设置正确的 URL 以呈现正确的数据？
您有 2 个选项 - 任一用户将在浏览器中输入 /blog/10/my-blog-title 之类的内容，您将拥有在 BlogPost 组件中获取博客所需的所有信息（只需显示加载程序获取时）。另一个选项是如果用户从 BlogBlock 导航 - 您将通过 Link 手动将他重定向到 BlogPost 并且您可以做同样的事情（重新获取），或者您可以将点击的博客存储在共享状态（例如 Redux）然后从BlogPost 组件中的该状态（例如，在 BlogPost 中 - 如果 sharedState.blog 不为空，则使用 sharedState.blog，否则使用 blogId 重新获取）。

【解决方案2】：

我认为这取决于您从哪里获取数据（img 等）

您可以使用 React 组件，并利用生命周期方法，特别是 componentDidMount()。看看我提供的链接，我认为它会有所帮助。

https://reactjs.org/docs/state-and-lifecycle.html

【讨论】：