React Router v4根据params获取数据

Posted 2021-05-04

我有这条路线： App.js

...
<Switch>
    <Route exact path="/" component={Projects}/>

    <Route exact path="/projects/:folder?" component={Projects}/>
    <Route exact path="/projects/:folder/:id" component={Sketch}/>
    <Route exact path="/projects/:folder/:id/details" component={Details}/>

    <Route component={NoMatch}/>
</Switch>
...

我需要根据文件夹参数在“项目”页面中获取数据。我正确检索数据但它没有呈现。它呈现旧列表和状态更改。我试过这样的： Projects.js

render () {
    return (
        ...
        <Section>
            {this.state.projects}
        </Section>
        ...
    )
}

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 () {
    const url = '/sketches' + (this.state.folder === 'sketches'? '':'/'+this.state.folder) + '/projects.json';
    axios.get(url).then((res) => {
        if (res.data !== null)
        {   
            const folder = this.state.folder === 'sketches' ? '': this.state.folder 
            this.setState({
                projects: <Grid list={res.data} folder={folder} key={"grid"}/>
            });
        }
    }).catch((ex) => {
        console.log(ex);
        this.setState({
            projects: <Redirect to="NoMatch"/>
        });
    })
}

我用链接更改了params。我不认为这是错误，但我仍然为您提供此代码。 ......我希望不在这里，因为我一直都在其他地方检查。

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 })
}

我可以从这段代码中看到，我没有使用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项目，以防有人想看看;） 也许有人可以告诉我它为什么不起作用，但我没有任何要求。有用。现在，没关系。 https://github.com/Darklod/p5-sketches-react