Как отфильтровать массив по маршруту в React.js? - PullRequest
Новая
       22

Как отфильтровать массив по маршруту в React.js?

0 голосов
/ 28 мая 2018

У меня есть массив сообщений, где я хотел бы использовать значения из 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>
     );
}

1 Ответ

0 голосов
/ 28 мая 2018

Используйте props.match.params для доступа к slug и фильтрации позже.

Рассмотрите следующий пример из Маршрутизатор 4 Документация . 

<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);
...