Хорошо, поэтому вам следует начать с изменения значения по умолчанию this.state
на
this.state = {
posts: []
}
. Помните, что вы хотите перебирать массив данных вместо перебора строки, что приведет к ошибке, если вы сделаете это.это, так что лучше с самого начала сохраняйте тип данных, который вы хотите использовать.
Тогда вам нужно разделить ответственность за ваш getPosts
метод, может быть, getPostByType
- лучшее название для этого, так что у вас есть
getPostByType(type) {
// if type is same as content.PostType then return it;
const nextPosts = this.state.posts.filter((content) => type === content.PostType);
this.setState({ posts: nextPosts });
}
и, наконец, вы можете перебирать сообщения, как это
render() {
// better use content.id if exists instead of index, this is for avoid problems
// with rerender when same index key is applied.
const posts = this.state.posts.map((content, index) => (
<Col md={4} className="mb-4" key={content.id || index}>
{content.title}
</Col>
));
return (
<div>
<button onClick={() => this.getPostByType('blog')}>Show Blog Posts</button>
{posts}
</div>
);
}
Затем вы можете использовать getPostsByType
в любое время в любом событии клика, передавая тип, который вы хотите отобразить.