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

Question

感觉我在这里遗漏了一些明显的东西 - 但我不知道如何访问我的 JSON 数据。我有一个容器组件:

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
  }
}

我的 reducer :

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) 时，它会给我未定义。为什么无法打印 JSON 内容？谢谢!

Answer 1

page 是一个数组，因此 this.props.page.id 是未定义。您可能想要访问数组中的第一个元素，在这种情况下您会这样做

this.props.page[0].id

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

你可以改写

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