javascript - React Router v4 基于参数获取数据

Question

我有这条路线:

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"/>
        });
    })
}

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

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。

Answer 1

您的问题可能与 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 需要的信息作为参数参数直接传递给它。