ReactJS 从 Rails API 获取：Return 数组中的散列

Question

let user = {  
   "id":14,
   "email":"fryguy@gmail.com",
   "first_name":"Fry",
   "last_name":"Hamson",
   "posts":[ { id: 28,
    dog_name: 'Skip',
    description: 'yub nub! yub nub!',
    image_url: 'https://www.k9ofmine.com/wp-content/uploads/2014/09/ewok-dog-costume.jpg' },
    { id: 29,
    dog_name: 'Champ',
    description: 'You were my brother! I loved you!',
    image_url: 'http://stories.barkpost.com/wp-content/uploads/2014/04/dog-star-wars-costume-12.jpg' },
    { id: 32,
    dog_name: 'Baxter',
    description: 'Give me treats, you will...',
    image_url: 'http://www3.pictures.zimbio.com/mp/r_Mf-uluvPrx.jpg' } ]

我在从上述代码片段中检索数据时遇到问题。我已经设置好逻辑，但我无法弄清楚将它放在我的 React Component 中的什么位置而不破坏它。这是我的 React 页面，我在提取中注释掉了逻辑。

class Profile extends Component {
  constructor(props){
    super(props);
    this.state = {
      names: [],
      descriptions: [],
      images: []
    }
    this.getProfileData = this.getProfileData.bind(this)
  }

  componentDidMount() {
    this.getProfileData()
  }

  getProfileData() {
    fetch(`/api/v1/users`, {credentials: 'same-origin'})
    .then(response => response.json())
    .then(user => {
      this.setState({
        id: user.id,
        firstName: user.first_name,
        lastName: user.last_name,
        posts: user.posts
    // for (i=0; i<user.posts.length; i++) {
    //   names.push(user.posts[i].dog_name)
    //   descriptions.push(user.posts[i].description)
    //   images.push(user.posts[i].image_url)
    // }
      })
    })
  }

  render() {
    return(
      <div>
        <ProfileTile />
      </div>
    )
  }
}

我知道注释掉的逻辑在 setState 中的格式不正确，因为我已经将其移动了很多。但是我不知道如何实现这个迭代。我在 Rails 端使用 active:model:serializers。在此先感谢您的帮助。

Answer 1

如果您想要状态中的名称、描述、图像，您应该使用地图功能来检索它们。

getProfileData() {
    fetch(`/api/v1/users`, {credentials: 'same-origin'})
    .then(response => response.json())
    .then(user => {
      this.setState({
        id: user.id,
        firstName: user.first_name,
        lastName: user.last_name,
        posts: user.posts,
        names: user.posts.map(u => u.dog_name),
        descriptions: user.posts.map(u => u.description),
        images: user.posts.map(u => u.image_url)
      });
    });
  }

ReactJS 从 Rails API 获取：Return 数组中的散列

ReactJS fetch from Rails API: Return the hash in an array

api

ruby-on-rails

fetch

active-model-serializers

reactjs