简体   繁体   English

"如何在 ReactJS 中使用 axios 从 json 数据(api)中获取特定数据"

[英]How do i get specific data from a json data (api) using axios in ReactJS

I want to get a Image with spesific Text in caption from Instagram graph api.For example if caption from image has "yes" word in Instagram then must show in homepage.The problem is i know i cant write if promises in axios or maybe i dont know how to write this rule.thank you for your help.我想从 Instagram 图形 api 的标题中获取带有特殊文本的图像。例如,如果图像的标题在 Instagram 中具有“是”字样,则必须在主页中显示。问题是我知道如果在 axios 中承诺我不能写,或者我可能不知道如何编写此规则。谢谢您的帮助。

 import React from 'react' import '../styles/home.css' import axios from 'axios'; 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=IGQ....`) .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> ) } { this.state.posts .map(post => <img className="post_img_food" key={post.id} src={post.media_url} alt="image"/> ) } </div> ) } }

You could try .indexOf and make a if statement that finds the string "yes" if its there it will display that picture if not elif or end.您可以尝试 .indexOf 并创建一个 if 语句来查找字符串“yes”,如果它在那里,它将显示该图片,如果不是 elif 或 end。

 var caption = "This is some generic sentence that contains the word yes"; var substring = "yes"; console.log(caption.indexOf(substring) !== -1)<\/code><\/pre>

"

You can use RegExp (Regular expression) Or ES6 built in function like .您可以使用 RegExp(正则表达式)或 ES6 内置函数,如 . include (),.search() to check if yes found in caption then use ternary operator . include (),.search() 检查是否在标题中找到是,然后使用三元运算符。

"

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM