Question

这是一个我从未见过的非常奇怪的问题。我只能使用点表示法引用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);

在另一个文件中，我可以访问所需的一些数据，但是我真的很想在此处的响应的基本级别访问数据，也不能这样做，它还会返回未定义的内容。甚至点符号也完全相同。

导入'./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组件中的数据，因为您已在render中添加了if条件。

无法使用点表示法访问json数据，这真的很奇怪

1 个答案: