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

Question

我无法在 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);
    });
  }

此处我尝试传递默认图像，只要预览属性不存在于 post

中

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

这是路径

Answer 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')

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

Reddit API preview pictures not showing in ReactJs

javascript

arrays

api

reddit

reactjs