在 API 中访问想要的数据？

Question

* 抱歉，我之前发布了一个类似的问题，但删除了它，因为这是一个结构更好的问题。

您好！我想从 PixaBay API 定位 largeImageURL 以在我的 PhotoResults 容器中的 GridTile 内渲染。我已将 Redux 配置到应用程序中。当我在提交 searchText 后控制台登录 this.props.photos 时，我收到一个长度为 20 的数组。我知道 0: Array(20) 中的 0: 表示第一个索引位置，但我不知道这如何帮助我定位 largeImageURL。我如何定位 largeImageURL 以在 GridTile 内呈现？非常感谢！

减速器

import * as actionTypes from '../actions/actions_index';

const photos = (state = [], action) => {
  switch(action.type) {
    case actionTypes.FETCH_PHOTOS:
      console.log('Action received', action);
      return [ action.payload.data.hits ];
    default:
      return state;
  }
}

export default photos;

照片结果容器

import React, { Component } from 'react';
import {GridList, GridTile } from 'material-ui/GridList';
import { connect } from 'react-redux';

class PhotoResults extends Component {
  render() {
    let photoList;
    if (this.props.photos) {
      photoList = (
        <GridList cols={3}>
          {this.props.photos.map(photo => (
            <GridTile title={photo.tags} key={photo.id}>
            <img src={photo.largeImageURL} alt="" />
            </GridTile>
          ))}
        </GridList>
      )
    } else {
      photoList = null;
    }
    console.log(this.props.photos);
    return (
      <div>
        {photoList}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return { photos: state.photos };
}

export default connect(mapStateToProps, null)(PhotoResults);

Answer 1

试试这个。最初 this.props.photos 将是未定义的，因此您需要在执行 .map

之前进行条件检查

  return(){
      return(
           <div>
              <GridList cols={3}>
                  {this.props.photos && Array.isArray(this.props.photos[0]) && this.props.photos[0].length > 0 && this.props.photos[0].map(photo => (
                     <GridTile title={photo.tags} key={photo.id}>
                         <img src={photo.largeImageURL} alt="" />
                    </GridTile>
                   ))}
    </GridList>
          </div>
      )
  }

这也可以，但我不推荐 if else in render

    render() {
       let photoList;
       if (this.props.photos && Array.isArray(this.props.photos[0]) && this.props.photos[0].length > 0)
           photoList = (
               <GridList cols={3}>
                    {this.props.photos[0].map(photo => (
                       <GridTile title={photo.tags} key={photo.id}>
                         <img src={photo.largeImageURL} alt="" />
                       </GridTile>
                    ))}
               </GridList>
              )
             } else {
             photoList = null;
            }
            console.log(this.props.photos);
           return (
           <div>
              {photoList}
           </div>
          );
        }

在 API 中访问想要的数据？

Access wanted data in API?

reactjs

redux

react-redux

redux-promise-middleware