Question

我的组件通过带有函数的道具获得一些属性：

const mapStateToProps = state => {
  const { entities: { keywords } } = state
  const {locale} = state
  return {
    keywords: keywords[locale]
  }
}

我在同一个组件中使用ajax获得状态关键字：

  componentDidMount() {
    this.props.loadKeywords()
  }

我的组件被渲染两次。首先，在ajax结算之前，所以在我的render方法中我得到了undefined：

render() {
  const { keywords } = this.props.keywords  
  ...

哪种解决方法正确？我将componentDidMount更改为componentWillMount但没有成功。

现在，根据现实世界的例子，我用一个空对象初始化了关键字状态：

function entities(state = { users: {}, repos: {}, keywords: {} }, action) {
  if (action.response && action.response.entities) {
    return merge({}, state, action.response.entities)
  }

  return state
}

我的减速机：

import { combineReducers } from 'redux'
import { routerReducer as router } from 'react-router-redux'
import merge from 'lodash/merge'
import locale from './modules/locale'
import errorMessage from './modules/error'
import searchText from './modules/searchText'

// Updates an entity cache in response to any action with response.entities.
function entities(state = { users: {}, repos: {}, keywords: {} }, action) {
  if (action.response && action.response.entities) {
    return merge({}, state, action.response.entities)
  }

  return state
}

export default combineReducers({
  locale,
  router,
  searchText,
  errorMessage,
  entities
})

我的行动：

import { CALL_API, Schemas } from '../middleware/api'
import isEmpty from 'lodash/isEmpty'

export const KEYWORDS_REQUEST = 'KEYWORDS_REQUEST'
export const KEYWORDS_SUCCESS = 'KEYWORDS_SUCCESS'
export const KEYWORDS_FAILURE = 'KEYWORDS_FAILURE'

// Fetches all keywords for pictos
// Relies on the custom API middleware defined in ../middleware/api.js.
function fetchKeywords() {
  return {
    [CALL_API]: {
      types: [ KEYWORDS_REQUEST, KEYWORDS_SUCCESS, KEYWORDS_FAILURE ],
      endpoint: 'users/56deee9a85cd6a05c58af61a',
      schema: Schemas.KEYWORDS
    }
  }
}

// Fetches all keywords for pictograms from our API unless it is cached.
// Relies on Redux Thunk middleware.
export function loadKeywords() {
  return (dispatch, getState) => {
    const keywords = getState().entities.keywords
    if (!isEmpty(keywords)) {
      return null
    }
    return dispatch(fetchKeywords())
  }
}

全部基于Real world redux example

我的解决方案

给出关键字实体的初始状态。我通过ajax得到这样的json： {＆＃39;区域设置＆＃39;：＆＃39; en＆＃39;，＆＃39;关键字＆＃39;：[＆＃39; keyword1＆＃39;，＆＃39; keyword2＆＃39;]} 但是，当我使用带有locale作为id的normalizr时，对于缓存结果，我的初始状态就像我在reducer中描述的那样：

function entities(state = { users: {}, repos: {}, keywords: { 'en': { 'keywords': [] } } }, action) {
  if (action.response && action.response.entities) {
    return merge({}, state, action.response.entities)
  }

  return state
}

如果我们有多种语言，我不喜欢的是最初的，如果我们添加另一种语言，还记得修改它，例如fr。在此

keywords: { 'en': { 'keywords': [] } }

应该是：

keywords: { 'en': { 'keywords': [] }, 'fr': { 'keywords': [] } }

Answer 1

这一行看起来有问题：

const { keywords } = this.props.keywords

它相当于：

var keywords = this.props.keywords.keywords;

我怀疑这是你的意图。

值得检查的另一件事是keywords[locale] mapStateToProps()，它可能最初解析为未定义。确保您的组件可以处理它，或者给它一个合理的默认值。

在ajax结算之前，Redux状态和组件属性未定义

1 个答案: