Javascript React路由器v4基于参数获取数据

我有以下路线：

App.js

。。。
...

我需要根据文件夹参数获取项目页面中的数据。我正确地检索了数据，但没有呈现数据。它会呈现旧列表，并且状态会更改。我这样试过：

Projects.js

render（）{
返回(
...
{this.state.projects}
...
)
}
组件将接收道具（新道具）{
var params=newProps.match.params；
this.setState（{folder:params.folder}）
这是loadProjects（）；
}
componentDidMount（）{
this.setState（{文件夹：this.props.match.params.folder}）；
这是loadProjects（）；
}
加载项目（）{
常量url='/Sketchs'+（this.state.folder==='Sketchs'？''：'/'+this.state.folder）+'/projects.json'；
获取（url）。然后（（res）=>{
if（res.data！==null）
{   
const folder=this.state.folder=='sketches'？''：this.state.folder
这是我的国家({
项目：
});
}
}).catch（（ex）=>{
控制台日志（ex）；
这是我的国家({
项目：
});
})
}

我使用链接更改参数。我不认为是这里的错误，但我仍然把这个代码给你
…我希望不在这里，因为我一直在其他地方查看

render () {
    return (
        <Link to={this.state.url}>
            {this.props.item.name}
        </Link>
    )
}

componentDidMount () {
    var url = '/projects/' + this.props.item.name + '';

    if (!this.props.item.items) {
        url = '/projects/' + (this.props.folder || 'sketches') + '/' + this.props.item.name + '/details';
    }

    this.setState({ url })
}

render（）{
返回(
{this.props.item.name}
)
}
组件安装（）{
var url='/projects/'+this.props.item.name+''；
如果（！this.props.item.items）{
url='/projects/'+（this.props.folder | | |'sketches'）+'/'+this.props.item.name+'/details'；
}
this.setState（{url}）
}

---

从这段代码中可以看出，我没有使用redux。

您的问题可能与

setState

在行为上通常是异步的这一事实有关。您可以使用

setState

具有的第二个回调参数，该参数是在状态实际更新时调用的回调：

componentWillReceiveProps (newProps) {
    var params = newProps.match.params;
    this.setState(
      { folder: params.folder },
      () => this.loadProjects());
}

componentDidMount() {   
    this.setState(
      { folder: this.props.match.params.folder },
      () => this.loadProjects());
}

---

如果这确实解决了它，您可能希望将

loadProjects

所需的信息作为参数参数直接传递给它。

谢谢，我使用了您的建议。现在它可以工作了，但我不知道为什么：D.
我改变了这种方式，但仍然不起作用，但当我修改了一些家长的东西后，我发现它起作用了

componentWillReceiveProps (newProps) {
    var params = newProps.match.params;

    if (params.folder !== this.state.folder)
        this.setState({ folder: params.folder || 'sketches' }, (folder) => this.loadProjects(this.state.folder));
}

componentDidMount() {   
    this.setState({ folder: this.props.match.params.folder || 'sketches' }, (folder) => this.loadProjects(this.state.folder));
}

我链接我的github项目，以防有人想看；）
也许有人能告诉我为什么它不起作用，但我不要求任何东西。它起作用了。现在没关系。

---

打开“网络”选项卡，然后首先检查是否确实发出了请求，如果是，返回了什么状态代码和数据。另外，为什么要在此处将空字符串作为道具传递

const folder=this.state.folder==='sketches'？''：this.state.folder

首先，不要试图将JSX组件保存在您的状态。保存将传递给状态为的JSX组件的信息。如果在状态上没有数据要传递给组件，则有条件地呈现重定向。如果存在，渲染组件并将存储在状态中的道具传递给它。您还需要在

组件WillReceiveProps

中添加一些条件，因为您不想在每次渲染时都调用api，只在props发生变化时才调用。@Jay，它发出了两个请求：一个是404/Sketchs/undefined/projects.json，另一个是200/Sketchs/specials/projects.json。我传递了空字符串，因为在这种情况下是主文件夹，否则是主文件夹中的子文件夹。@KyleRichardson，我试过这样做，但不工作{this.state.projects？：}

componentWillReceiveProps (newProps) {
    var params = newProps.match.params;
    this.setState(
      { folder: params.folder },
      () => this.loadProjects());
}

componentDidMount() {   
    this.setState(
      { folder: this.props.match.params.folder },
      () => this.loadProjects());
}

componentWillReceiveProps (newProps) {
    var params = newProps.match.params;

    if (params.folder !== this.state.folder)
        this.setState({ folder: params.folder || 'sketches' }, (folder) => this.loadProjects(this.state.folder));
}

componentDidMount() {   
    this.setState({ folder: this.props.match.params.folder || 'sketches' }, (folder) => this.loadProjects(this.state.folder));
}