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

Question

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

数据似乎从后端正确获取到前端，因为图库的图像正在显示。在我看来，(硬编码版本和数据库连接版本之间)的区别主要在于React Router v4的设置，也许是一个语法问题，导致路径匹配或阻止数据传递到 subview :

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

当出现错误时，我会收到不同的消息，具体取决于浏览器:有人说“类型错误:无法获取未定义或空引用的属性‘blurbs’；”其他说“类型错误: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 中的语法有什么问题？蒂亚

Answer 1

问题是来自 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}
    ...
);