在Rails中反应获取并显示附件

Question

似乎是一个简单的问题，但是，我不知道为什么这会造成一点压力。

这是情况：

获取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>
      );
    });

事情一直是轨道载波附件/文件。在数组内部创建对象，许多人仍然怀疑如何获取和渲染这些文件。

Answer 1

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是一个数组，因此在您调用的路径上没有任何数据。 “进入对象的路径”仅表示按点符号顺序调用的一系列键。