Axios：如何根据特定 child 元素呈现 API 项？

Question

大家好，我是 ReactJS 和 Axios 的新手。我尝试从 Instagram Api 获取数据，如果图像在标题中有特定字母，我想渲染图像，例如，如果标题有 'Y' 字母应该在页面上呈现，否则不会。使用我的代码，我从个人资料中呈现所有 post，但我无法对数据进行排序，我想要的方式请帮助我 [![

export default class Home extends React.Component {
    state = {
      posts: []
    }
  
    componentDidMount() {
      
        axios.get("https://graph.instagram.com/me/media?fields=id,caption,media_url,permalink,username&access_token=IGQVJWM3BtaTNEQW9iYXBNZA3JwUU")
        .then(res => {
          const posts = res.data.data;
          this.setState({ posts });
        })
    }
   
 
 

  render() {
    return (
      <div>
       
        {
          this.state.posts
            .map(post =>
            <div className="banner_image">
              <img className="post_img" key={post.id} src={post.media_url} alt="image"/>
           <div className="banner_text">
             <div className="banner_content">
                {
                this.state.posts
                    .map(post =>
                    <h1 className="main_title" key={post.id}>{post.username}</h1>           
                    )
                }
                {this.state.posts
                    .map(post =>
                    <h3 className="main_caption" key={post.id}>{post.caption}</h3>
                
                    )
                }
               
             </div>
           </div>    
           </div>
            )
        }
        
       
         
      </div>
    )
  }
}

][2]

Answer 1

我会放弃基于 class 的 React 组件，因为推荐使用函数式风格。您没有在帖子映射内进行任何排序，这就是它不起作用的原因。在你做 this.state.posts.map 的地方，我会用过滤器链接它以删除你不想要的帖子。所以它会是这样的：

this.state.posts
        .filter(post => post.includes('Y'))
        .map(post => ...)

Axios：如何根据特定 child 元素呈现 API 项？

Axios: How to render API item base on spesific child element?

javascript

api

facebook-graph-api

reactjs

axios