Question

我有一个简单的减速器示例：

import { fromJS } from 'immutable'
import {
  REQUEST_SUCCESS
} from './constants'

const initialState = fromJS({
  badges: []
})

function badgesReducer (state = initialState, action) {
  switch (action.type) {
    case REQUEST_SUCCESS:
      return state
        .set('badges', action.payload.badges || [])
    default:
      return state
  }
}

export default badgesReducer

这里的想法是将徽章设置为等于action.payload.badges内的api响应所返回的数组，但我相信我做错了，因为我收到了以下错误：

warning.js：44警告：道具类型失败：类型的道具badges无效 object提供给Badges，预计array

Answer 1

发生错误是因为react正在期待一个数组，但是你正在返回一个Immutable.List。并且React渲染组件两次，因为第一次渲染发生在reducer的initialState，然后第二次渲染是由于props更改（在调度的操作之后）。

你的道具不一致，因为你在initialState＆amp;中传递了Immutable.List。 REQUEST_SUCCESS行动中的数组。

如果你想在任何地方坚持使用Immutable.js，那么声明这样的propTypes。

组件

import React, { PropTypes } from 'react'
import { List } from 'immutable'

Component.propTypes = {
  badges: PropTypes.instanceOf(List)
}

减速

import { fromJS, List } from 'immutable'

function badgesReducer (state = initialState, action) {
  switch (action.type) {
    case REQUEST_SUCCESS:
      return state
        .set('badges', fromJS(action.payload.badges) || List())
    default:
      return state
  }
}

如果您想要始终将数组传递给组件，请从initialState声明

中删除fromJS

使用不可变的js将reducer状态设置为返回的数组

1 个答案:

组件

减速