не могу получить доступ к данным JSON с помощью точечной нотации, это действительно странно

Question

Это действительно странная проблема, которую я никогда раньше не видел. Я могу ссылаться только на определенный уровень в файле JSON с помощью точечной нотации, тогда он вообще не распознается и возвращает неопределенное значение, даже если данные определенно определены.

Я ничего не нашел в Интернете по этому поводу, поэтому я надеюсь, что кто-то еще сталкивался с этой проблемой раньше.

Вот ссылка на один из файлов JSON, с которыми я работаю, для его создания я использовал myjson.com: https://api.myjson.com/bins/revu0

Вот мой запрос данных, который отлично работает, кроме 1 вещи.

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, потому что если я не напишу его здесь, я не смогу получить к нему доступ в других моих файлах.

В этом одном файле я не могу получить доступ к адресу. Он возвращает неопределенное значение. Я могу читать другие свойства, но только не это.

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);

В этом другом файле я могу получить доступ к некоторым нужным мне данным, но я действительно хочу получить доступ к данным на базовом уровне ответа здесь и не могу этого сделать, он также возвращает неопределенное значение. Даже точечная запись точно такая же.

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);

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, потому что при начальной загрузке компонента нет данных, доступных в исходном состоянии редуктора, вы получаете данные после http-вызовов. Вы можете получить доступ к данным в PostList компоненте, потому что вы добавили условие if в render.