使用动态 url 参数显示 mysql 数据

Question

我在主视图中有一个图像库，我希望能够单击每个图像以打开一个新的子视图以显示详细信息（例如图像标题等文本）。我的硬编码版本——图像和文本存储在前端——有效。但是当我将数据存储在 MySQL 数据库中时，我遇到了一个问题——例如，单击图像时无法深入了解细节。

数据似乎从后端正确获取到前端，因为画廊的图像正在显示。在我看来，区别（硬编码版本和数据库连接版本之间）主要在于反应路由器 v4 的设置，可能是阻止路径匹配或阻止数据传递到子视图的语法问题：

ReactDOM.render(
..
<Route path="/articles/:PostId" render={(props) => (<Post articles={this.state.blurbs} {...props} />)} />

当涉及到错误时，我会收到不同的消息，具体取决于浏览器： 一个说 “TypeError：无法获取未定义或空引用的属性‘模糊’；” 其他 说 "TypeError: this.state 未定义"

为简洁起见，我的数组状态是这样初始化的：

class App extends React.Component
..
this.state = {
  blurbs: []
}

数组状态的值是这样更新的：

componentDidMount()
..
let self = this;
..
return response.json();
...
.then(function(data) {
  self.setState({blurbs: data});
})

在子组件中，数据是根据数据库中的唯一ID呈现的：

render
..
return
..
{this.props.articles[this.props.match.params.PostId].Title}

所以回过头来，假设以上所有内容都有意义，react router 中的语法有什么问题？ tia

Answer 1

为了给这个线程带来“关闭”，我正在分享对我有用的东西。我没有通过反应路由器将所有道具从父母传递给孩子，而是通过图像链接将一些道具从父母传递给孩子。

问题——道具没有完全从父母传给孩子——我并没有立即清楚。我通过修补来缩小我的问题范围（例如用硬代码替换项目的某些部分以识别代码的有问题的部分）。

我发现了一个线程，其他人在通过反应路由器进行数据传输时遇到了类似的阻塞。在经历了几个障碍之后，这里是让我再次前进的变化。

在父组件中，状态引用已从反应路由器中删除，如下所示：

ReactDOM.render(
..
<Route path="/articles/:PostId" render={(props) => (<Post {...props}/>)} />

在父组件中，将状态引用添加到图像链接以将链接用作数据传输媒介：

render() {
return (
<div>
  {this.state.blurbs.map(image => (
    <Link key={image.PostId}
    to={{pathname: `/articles/${image.PostId}`,
    state: { blurbs: this.state.blurbs }
    }}>
    <img src={image.src}/>
    </Link>
    ))
    }
</div>

在子组件中，添加了 this.props.location.state.blurbs 作为替换，以使子组件可以访问数据（最初在父组件中获取）：

render
..
return
..
{this.props.location.state.blurbs[this.props.match.params.PostId].Title}

这是另一个线程的链接： How do i pass state through React_router?

Answer 2

问题在于来自 API（例如：MySQL）的数据可能是一个数组。但是，您将其视为 js 对象。

在您的子组件的渲染函数中，您需要使用findIndex 方法来查找数组的哪个元素包含您的PostId URL 参数（docs）的值。这是假设您的表有一个 id 元素作为您的主键。

render() {
  const idx = this.props.articles.findIndex(x => x.id === this.props.match.params.PostId);

  const article = idx > -1 ? this.props.articles[idx] : {};

  return (
    ...
    {article.Title}
    ...
);