Реакция получения и показа вложенных файлов в Rails - PullRequest
Новая
       12

Реакция получения и показа вложенных файлов в Rails

0 голосов
/ 13 декабря 2018

кажется простой проблемой, но я все равно не знаю, почему это вызывает небольшое напряжение.

здесь ситуация:

после получения вложений на Post.show врельсы 

  async getAttachments() {
    // this.setState({showProgress: true})
    let auth_token = window.localStorage.getItem("auth_token");
    let post_id = this.props.match.params.id;
    fetch(`/posts/${post_id}/attachments`, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Access: auth_token
      }
    })
      .then(response => response.json())
      .then(json => {
        this.setState({
          attachments: json.attachments,

          image: json.attachments.image,
          thumb: json.attachments.image.thumb,
          url: json.attachments.thumb.url
        });
      })
      .catch(error => {
        console.error(error);
      });
  }

я решил сделать это как обычно

с {this.state.attachments}

, но не визуализировал.

, поэтому я попытался отобразить итогда я попробовал 

   var attachments = this.state.attachments.map(a => {
      return (
        <div key={a.id}>
          <img source={a.thumb} />

          <img source={a.url}>{a.url}</img>
        </div>
      );
    });

вещь, которая когда-либо была прикреплена.создайте объект внутри массива, и многие люди все еще сомневаются в том, как получить и отобразить эти файлы.

enter image description here

1 Ответ

0 голосов
/ 13 декабря 2018

В теге HTML image используется атрибут с именем src, а не source.Это твоя проблема.

В сторону: рассмотрите следующий фрагмент кода: 

this.setState({
  attachments: json.attachments,        // OK, keep  

  image: json.attachments.image,        // bad path into the object  
  thumb: json.attachments.image.thumb,  // bad path into the object  
  url: json.attachments.thumb.url       // bad path into the object
});

Три строки, начинающиеся с image, thumb и attachment, должны быть удалены.

В результате использования кода без удаления этих строк ваше состояние будет выглядеть следующим образом: 

{
  attachments:  <an array of attachments>,  // correct, wanted, should keep  
  image: undefined,
  thumb: undefined,  
  url: undefined
}

Это связано с тем, что json.attachments является массивом, поэтому в нем нет данных.пути, которые вы называете.Под «путем к объекту» я подразумеваю просто последовательность клавиш для вызова в последовательности точечных обозначений.

...