Javascript Reddit API预览图片未在ReactJs中显示
我无法访问Reddit API中preview.image中的图像源,尽管我可以访问其他所有内容,并且可以使用subreddit名称预览我的卡Javascript Reddit API预览图片未在ReactJs中显示,javascript,arrays,reactjs,api,reddit,Javascript,Arrays,Reactjs,Api,Reddit,我无法访问Reddit API中preview.image中的图像源,尽管我可以访问其他所有内容,并且可以使用subreddit名称预览我的卡 export default { search: function(searchTerm) { return fetch("http://www.reddit.com/search.json?q="+searchTerm+'&sort=new'+'&limit=30'+'&include_o
export default {
search: function(searchTerm) {
return fetch("http://www.reddit.com/search.json?q="+searchTerm+'&sort=new'+'&limit=30'+'&include_over_18=on')
.then(res => res.json())
.then(data => data.data.children.map(data => data.data))
.catch(err => console.log("ERROR"));
}
}
这就是我将Api数组置于状态的地方
const [myResults, setResults] = useState ([]);
const redditSearch = () =>{
reddit.search(item).then(results => {
setResults(results);
});
}
这里,每当文章中不存在预览属性时,我尝试传递一个默认图像
let image = myResults.preview ? myResults.preview.images[0].source.url : 'https://lh3.googleusercontent.com/8Vw-7MAm558750a4M55fiOlUf7lP2cYnFuqSWynrygIiyEEiQQDa_xxHKYOX83L0UD2T=s180';
<div className="Cards">{myResults.map((results, index) => (<ReactBootStrap.Card key={index} className="CardBody" style={{ width: '18rem' }}>
<ReactBootStrap.Card.Img variant="top" src={image} />
<ReactBootStrap.Card.Body >
<ReactBootStrap.Card.Title>{results.subreddit}</ReactBootStrap.Card.Title>
<ReactBootStrap.Card.Text>
Filler Text
</ReactBootStrap.Card.Text>
<ReactBootStrap.Button variant="primary">Go somewhere</ReactBootStrap.Button>
</ReactBootStrap.Card.Body>
</ReactBootStrap.Card>))}</div>
</React.Fragment>);
这就是数据在API及其数组中的外观
preview.images[0].source.url
这是设法修复它的路径
let image = myResults.preview ? myResults.preview.images[0].source.url : 'https://lh3.googleusercontent.com/8Vw-7MAm558750a4M55fiOlUf7lP2cYnFuqSWynrygIiyEEiQQDa_xxHKYOX83L0UD2T=s180';
无法工作,因为它是在搜索任何内容之前初始化的。
相反,我将其原始粘贴到src中
<ReactBootStrap.Card.Img variant="top" src={results.preview ? results.preview.images[0].source.url : 'https://lh3.googleusercontent.com/8Vw-7MAm558750a4M55fiOlUf7lP2cYnFuqSWynrygIiyEEiQQDa_xxHKYOX83L0UD2T=s180'} />
<ReactBootStrap.Card.Img variant="top" src={results.preview ? results.preview.images[0].source.url : 'https://lh3.googleusercontent.com/8Vw-7MAm558750a4M55fiOlUf7lP2cYnFuqSWynrygIiyEEiQQDa_xxHKYOX83L0UD2T=s180'} />
return fetch("http://www.reddit.com/search.json?q="+searchTerm+'&raw_json=1'+'&sort=new'+'&limit=30'+'&include_over_18=on')