无法访问 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
  }
}

我的减速机：

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

页面是一个数组，因此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 2

从存储中获取数据是异步的，所以你必须在你的 reducer 上添加加载变量

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 3

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

所以使用this.props.page[0].id

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