Question

我有以下数据结构：

{
    "_id" : ObjectId("5749cb4d42f5b8a18912e8c3"),
    "language" : "en-gb",
    "definitions" : {
        "mobileMenuLabel" : "menu",
        "copyright" : "© 2016 Alexander Ward"
    }
}

在反应组件中，我试图渲染版权文本。该组件将很高兴地向我展示“语言”中的内容，但每当我尝试访问“定义”中的任何内容时，我都会收到错误，告诉我定义未定义。

这是我的组件：

import React from 'react';
import Navigation from './nav.jsx'
import { connect } from 'react-redux';
import { languagesLoad } from '../../scripts/actions';

export default class Footer extends React.Component {
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch(languagesLoad());
  }

  render() {
    const { languages } = this.props
    if(languages.isFetching) {
      return(
        <section class="loader">
          <span>Content is loading...</span>
        </section>
      )
    } else {
      const definitions = languages.items.definitions;
      return(
        <footer class="c-global-footer">
          <div class="wrapper">
            <Navigation postion="footer" />
            <div class="c-global-footer_copyright">
              { definitions.copyright }
            </div>
          </div>
        </footer>
      )
    }
  }
}

function select(state) {
  const { languages } = state;
  return {
    languages
  };
}

export default connect(select)(Footer);

以下是数据从中提取的reducer：

export function languages(state = initialState, action) {
  switch (action.type) {
    case GET_LANG :
      return Immutable(state).merge({
        items: action.payload.languages,
        isFetching: false
      })
    case REQUEST_LANG :
      return Immutable(state).merge({
        isFetching: true
      })
    default:
      return state;
  }
}

以下是reducer使用的操作：

// Language
export function requestLanguages() {
  return {
    type: REQUEST_LANG
  };
}

export function getLanguages(json) {
  return {
    type: GET_LANG,
    payload: {
      languages: json,
      receivedAt: Date.now()
    }
  };
}

// thunk actions
export function languagesLoad(pageName) {
  return dispatch => {
    dispatch(requestLanguages());
    return axios.get(API_ROOT + 'lang/en-gb')
      .then(function(response) {
        dispatch(getLanguages(response.data))
      })
  }
}

在反应中访问嵌套对象

0 个答案: