如何根据 React.js 中的路由过滤数组？

Question

我有一个帖子数组，我想使用 url 或路由中的值来确定我想在数组中显示的内容，比如过滤器。例如，我选择的帖子是“www.mywebsite.com/chocolate”，所以在我显示帖子的路线中，我只显示“巧克力”而不是所有其他帖子。有什么我可以这样做的，结果 === 'chocolate':

const post = response.data.filter(({url}) => url === 'dynamic_variable_that_knows_what_the_current_url_is_with_the_value_of_chocolate');

下面是我的 App.js 代码：

getData() {
    axios.get('/posts.json')
        .then(response => {
            //console.log(response);
            const post = response.data;
            const updatedPosts = post.map(post => {
                return {
                    ...post
                }
            });

            this.setState({
                posts: updatedPosts
            });
        })
        .catch(error => {
            console.log(error);
        });
}

render() {

    return (
        <div className={classes.App}>
            <Layout>
              <Switch>
                <Route path="/food/:slug" exact render={(props) => this.state.posts.map(post => { return (<FullPost key={post.id} id={post.id} pathname="/:slug" {...props} />)} )} />
                <Route render={() => <h1>Whoops! What you're looking for isn't here anymore.</h1>} />
              </Switch>
            </Layout>
        </div>
     );
}

Answer 1

使用props.match.params 访问slug 并稍后过滤。

考虑以下来自 Router 4 documentation 的示例。

<Route path="/user/:username" component={User}/>

const User = ({ match }) => {
  return <h1>Hello {match.params.username}!</h1>
}

在你的情况下，它看起来类似于

const post = response.data.filter(url => url === this.props.match.params.slug);