Блог

Я не могу получить доступ к источнику изображения в preview.image внутри Reddit API, хотя у меня есть доступ ко всему остальному и я могу просматривать свои карточки, например, с именами subreddit.

 export default {
    search: function(searchTerm) {
      return fetch("http://www.reddit.com/search.json?q=" searchTerm 'amp;sort=new' 'amp;limit=30' 'amp;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 
  

это путь

Удалось это исправить

 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 dev, мне пришлось добавить ‘amp;raw_json=1’ к моему запросу

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