Reddit API 预览图片未在 ReactJs 中显示答案

【问题标题】：Reddit API preview pictures not showing in ReactJsReddit API 预览图片未在 ReactJs 中显示
【发布时间】：2021-02-14 11:11:27
【问题描述】：

我无法访问 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_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>);

我的卡片也能正常工作

preview:
  enabled: true
  images: Array(1)
    0:
      id: "lRWiJ4V8rBsmyXu1pcwE5_aWHwuIT3JT2HTjo-DbhOA"
      resolutions: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
      source:
         height: 2822
         url: "exampleUrl.jpg"
         width: 2117

这就是数据在 API 中的样子，它是一个数组

preview.images[0].source.url

这是路径

【问题讨论】：

标签： javascript arrays reactjs api reddit

【解决方案1】：

设法修复它

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'} />

但这还没有结束。由于官方 reddit 开发文档中写的遗留原因，我不得不在我的请求中添加一个 '&raw_json=1'

return fetch("http://www.reddit.com/search.json?q="+searchTerm+'&raw_json=1'+'&sort=new'+'&limit=30'+'&include_over_18=on')

【讨论】：