Question

感觉我在这里遗漏了一些明显的东西 - 但我无法弄清楚如何访问我的JSON数据。我有一个Container组件：

class About extends Component {
  componentDidMount(){
    const APP_URL = 'http://localhost/wordpress/'
    const PAGES_URL = `${APP_URL}/wp-json/wp/v2/pages`

    this.props.fetchAllPages(PAGES_URL, 'about')
  }

  render(){
    return (
      <div>
        <Header/>
        <div className="bg">
          <div className="home-wrapper">
            <h1>AAAAABBBBBOOOOUUUUUT</h1>
            <Counter/>
            <AboutInfo />
          </div>
        </div>
        <Footer/>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ fetchAllPages }, dispatch)
}

export default connect(null, mapDispatchToProps)(About);

智能组件：

class AboutInfo extends Component {
  render(){
    console.log(this.props.page);
    console.log(this.props.page.id);
    return (
      <div>
        <h1>This is ID: {this.props.page.id}</h1>
      </div>
    )
  }
}

const mapStateToProps = ({ page }) => {
  return { page }
}

export default connect(mapStateToProps)(AboutInfo);

我的行动：

export const fetchAllPages = (URL, SLUG) => {
  var URLEN;

  if(!SLUG){
    URLEN = URL
  } else {
    URLEN = URL + "?slug=" + SLUG
  }

  return (dispatch) => {
    dispatch(fetchRequest());
    return fetchPosts(URLEN).then(([response, json]) => {
      if(response.status === 200){
        if(!SLUG) {
          dispatch(fetchPagesSuccess(json))
        } else {
          dispatch(fetchPageBySlugSuccess(json))
        }
      } else {
        dispatch(fetchError())
      }
    })
  }
}

const fetchPageBySlugSuccess = (payload) => {
  return {
    type: types.FETCH_PAGE_BY_SLUG,
    payload
  }
}

我的减速机：

const page = (state = {}, action) => {
  switch (action.type) {
    case FETCH_PAGE_BY_SLUG:
      console.log(action.paylod)
      return action.payload
    default:
      return state
  }
}

这给了我：

当我在AboutInfo组件中的console.log（this.props.page）时，它打印对象，但是当我打印console.log（this.props.page.id）时，它给了我 undefined 。为什么我不能打印JSON内容？谢谢！

Answer 1

从商店获取数据是异步所以您必须在reducer上添加加载varibale

class AboutInfo extends Component {
 render(){
  if(this.props.loading) return (<div>loading</div>);
  return (
   <div>
    <h1>This is ID: {this.props.page.id}</h1>
   </div>
  );
 }
}

const mapStateToProps = ({ page, loading }) => {
 return { page, loading }
}

关于你的行动尝试撤退

json.page[0]

Answer 2

页面是一个数组，因此this.props.page.id是undefined。您可能希望访问数组中的第一个元素，在这种情况下您将执行

this.props.page[0].id

但您可能还需要添加测试，因为在响应可用之前，您将尝试访问page[0].id并且可能会中断。

你可以写

this.props.page && this.props.page[0] && this.props.page[0].id

Answer 3

这是因为page是一个数组而id是第一个元素的属性。

因此请使用this.props.page[0].id

如果屏幕截图中的已记录对象是this.props.page，那么您将需要和.page，因为它也是对象的一部分this.props.page.page[0].id

无法访问JSON对象信息React / Redux

3 个答案: