Question

我有一系列帖子，我想使用网址或路由中的值来确定我想要在数组中显示的内容，例如过滤器。例如，我选择的帖子是'www.mywebsite.com/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并稍后过滤。

请考虑以下示例来自路由器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);

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

1 个答案: