Блог

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

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

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

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

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

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

импортировать ‘./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;
  }
}
  

Вы не можете получить доступ props.apts[0].address , потому что при начальной загрузке компонента в исходном состоянии reducer нет доступных данных, вы получаете данные после http-вызовов. Вы можете получить доступ к данным в PostList компоненте, потому что вы добавили условие if внутри рендеринга.