javascript - 无法使用点符号访问 json 数据，这真的很奇怪

Question

这是一个我以前从未见过的非常奇怪的问题。我只能使用点表示法引用 JSON 文件中的某个级别，然后它根本无法识别并返回未定义，即使数据已明确定义。

我根本没有在网上找到任何关于此的信息，所以我希望其他人之前遇到过这个问题。

这是我正在使用的一个 JSON 文件的链接，我使用 myjson.com 创建它:https://api.myjson.com/bins/revu0

这是我的数据请求，除了一件事外工作正常。

export const fetchPosts = () => {

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

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

注意我写了 response.data.aparmtents，这是因为如果我不在这里写它，我就无法在我的其他文件中访问它。

在这个文件中，我无法访问 .address，它返回未定义。我可以读取其他属性，但不能读取那个属性。

import './ApartmentCountTitle.css';
import React from 'react';
import { connect } from 'react-redux';
import ToolTip from '../ToolTip/ToolTip';

const ApartmentCountTitle = (props) => {
   console.log(props.apts[0].address)
  return (
    <div className="ApartmentCountTitle containerapttitle">
      <div>558 of 889 Listings In </div>
      <div className="tooltip">
        <ToolTip />
      </div>
    </div>
  );
}


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

export default connect(mapStateToProps)(ApartmentCountTitle);

在这个其他文件中，我可以访问一些我需要的数据，但我真的想访问这里响应的基本级别的数据，但也做不到，它也返回未定义。甚至点符号也完全相同。

导入'./ApartmentList.css';

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../../actions';
import Grid from '@material-ui/core/Grid';

class PostList extends Component {

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

  renderList() {
    if(this.props.apts) {
      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'>{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);

import './ApartmentList.css';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../../actions';
import Grid from '@material-ui/core/Grid';

class PostList extends Component {

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

  renderList() {
    if(this.props.apts) {
      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'>{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);

我希望我解释清楚了，这是一个非常奇怪的问题，我完全被难住了。使用点符号访问数据从来没有遇到过问题，无论文件有多大。

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

Answer 1

您无法访问 props.apts[0].address，因为当组件最初加载时，在 reducer 的初始状态下没有可用数据，您会在 http 调用后获得数据。您可以访问 PostList 组件中的数据，因为您在渲染中添加了 if 条件。