Question

我正在使用axios获取数据的react / redux项目，但是由于某种原因，某些数据无法使用点表示法进行访问。

例如，这可以很好地提取数据：

console.log(this.props.apts.data)

这将返回TypeError：无法读取未定义的属性'apartments'：

console.log(this.props.apts.data.apartments)

我知道实际上存在数据。这种情况也发生在文件的其他部分，而不仅仅是对象的这一特定数组。

以下是我正在使用的JSON文件之一：https://api.myjson.com/bins/x2ad4

这是我的动作创建者：

export const fetchPosts = () => {
  return async dispatch => {
    const response = await jsonPlaceholder.get('https://api.myjson.com/bins/x2ad4');

    dispatch({ type: 'FETCH_POSTS', payload: response })
  }
}

如果将有效负载更改为response.data.apartments，则可以像下面这样访问组件中的apartments数组：

class PostList extends Component {

  componentDidMount() {
    this.props.fetchPosts();
  }

  formatPricing(price) {
    if(this.props.apts[0].pricing.currency === 'EUR') {
      return `${price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")} €`;
    } else {
      return `£${price}`
    }
  }

  renderList() {
    return this.props.apts.map(apartment => {
      return (
        <Grid key={apartment._id} item lg={4} md={6} xs={12}> 
          <div> 
            <img style={{objectFit: 'cover'}} src={apartment.images.photos[0].path} alt="" width='100%' height="150px"/>
            <div className="containeraps">
              <div className='aptprice'>{this.formatPricing(apartment.pricing.price)}</div>
              <div className="monthutil">
                <div>Per Month</div>
                <div>Utilities incl.</div>
              </div>
            </div>
            <div className="movein">
              from 29.24.2019 - {parseInt(apartment.details.squareMeters)} m² - {apartment.bedroomCount} bedroom
            </div>
          </div>
        </Grid>
      )
    })
  }

  render() {
    return (
      <div className='aptlist'>
        <Grid container spacing={24}>
          {this.renderList()}
        </Grid>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return { apts: state.PostsReducer }
}

export default connect(mapStateToProps,
  {fetchPosts}
)(PostList);

但是，如果我只是将响应用作有效负载，那么我将无法访问公寓数组，因为“返回this.props.apts.data.apartments.map（apartment =>”会给我带来TypeError：无法读取属性

未定义的“公寓”。

不幸的是，我也只需要响应中的数据，所以我没有解决方法。

这是我的减速机：

export default (state = [], action) => {
  switch(action.type) {
    case 'FETCH_POSTS':
      return action.payload;
    default:
      return state;
  }
}

最初，我认为这与不加载数据有关，但是由于存在某些数据，因此必须全部可以访问。这就是现在让我很沮丧的原因，为什么只有一些数据可以访问而有些则不能。

我已经改变了在各种不同文件中使用点符号引用数据的方式，以更改提取方式，但是到目前为止，只有一种方法可以访问Apartments数组。疯狂的是，即使它不起作用，我也可以console.log它，并且我在控制台中看到了数据。

更新：我无法使用点表示法来更新深度超过2个调用的任何内容。因此props.apts.queryParams返回信息，但是使用点表示法将任何内容获取到queryParams内也不起作用。

对于公寓数组，我无法查看该数组的任何唯一索引。因此，props.apts.apartments显示数据数组，而props.apts.apartments [0]则根本不显示任何数据。我尝试使用传播运算符解决此问题，但找不到解决方案。

Answer 1

我找到了一种解决方法，它虽然不优雅，但可以完成工作。我创建了几个化简器，并根据需要的数据调度了不同级别的json。

dispatch({ type: 'APARTMENT_LIST', payload: response.data.apartments })
dispatch({ type: 'APARTMENT_TOTAL', payload: response.data})
dispatch({ type: 'CITY_NAME', payload: response.data.queryParams})

使用点符号（最疯狂的事情）无法访问某些JSON数据

1 个答案: