axios获取数据后出错

Question

开始将数据存在defautState中页面没有问题，异步获取数据也能成功获取，但页面显示TypeError: Cannot read property ‘get’ of undefined，TypeError: Cannot read property 'map of undefined是什么问题，
这是actionCreators代码：

import axios from 'axios';
import * as constants from './constants';
import {fromJS} from 'immutable';

const changeDetail = (overview,story)=> ({
    type: constants.CHANGE_DETAIL,
    overview: fromJS(overview),
    story: fromJS(story)
})

export const getDetail = () => {
    return (dispatch) => {
        axios.get('/api/genji.json').then((res) => {
            const result = res.data.data;
            console.log(result.overview);
            dispatch(changeDetail(result.overview, result.story))
        })
    }
}

这是reducer 的代码：

import { fromJS } from 'immutable';
import * as constants from './constants';

 const defaultState = fromJS({
    overview: {},
    story: {}
});

export default (state = defaultState, action) => {
    switch(action.type) { 
        case constants.CHANGE_DETAIL:
        return state.merge({
            overview: action.overview,
            story: action.story
        })
        default:
			return state;
	}
 }

这是获取的数据，之前放在defaultState里面是没有问题的。

{
	"overview":{
		"role":"输出",
		"desc":"源氏可以用致命而准确的手里剑重创敌人，他的高科技武士刀可以用来反弹敌人的远程攻击，或是对敌人施展一次快速攻击。",
		"bgVideo":[
			"http://overwatch.nos.netease.com/1/assets/images/hero/genji/idle-video.webm",
			"http://overwatch.nos.netease.com/1/assets/images/hero/genji/idle-video.mp4"
		],
		"abilities":[{
				"name":"镖",
				"desc":"源氏快速扔出3枚致命的手里剑。按鼠标右键可以在更宽的范围内同时扔出3枚手里剑。",
				"iconUrl":"http://overwatch.nos.netease.com/1/assets/images/hero/genji/ability-shuriken/icon-ability.png"
			},{
				"name":"闪",
				"desc":"格挡向你射来的飞射物并将其向你瞄准方向反弹回去，同时还能格挡近战攻击。",
				"iconUrl":"http://overwatch.nos.netease.com/1/assets/images/hero/genji/ability-deflect/icon-ability.png"
			},{
				"name":"影",
				"desc":"快速向前冲刺，对遇到的敌人造成伤害。消灭敌人可以重置冷却时间。",
				"iconUrl":"http://overwatch.nos.netease.com/1/assets/images/hero/genji/ability-swift-strike/icon-ability.png"
			},{
				"name":"斩",
				"desc":"源氏在短时间内拔出武士刀。在入鞘之前，源氏可以对敌人造成巨大伤害。",
				"iconUrl":"http://overwatch.nos.netease.com/1/assets/images/hero/genji/ability-dragonblade/icon-ability.png"
			}
		]
	},
	"story":{
		"biography":{
			"name":"全称：岛田源氏，年龄:35岁",
			"occupation":"职业：冒险家",
			"baseOfOperation":"尼泊尔，香巴里寺庙",
			"affiliation":"（前）岛田家，（前）守望先锋"
		},
		"detail":{
			"title":"“身可死，武士之名不可弃。”",
			"backstory":"<p>半机械人岛田源氏已经接受了他曾经排斥的强化躯体，并因此发现了更高境界的人性。</p><p>作为岛田忍者家族大名最年轻的儿子，源氏的一生荣华富贵。他对家族的非法生意毫无兴趣，尽管他精通并且享受忍者训练，但他依然热衷花花公子的生活。家族内的许多人都将源氏视为一个危险的累赘，并且怨恨其父亲一再地包庇和宽容。在家族大名意外死亡后，源氏的哥哥半藏，要求源氏在父亲创建的帝国中扮演一个更加积极的角色。但源氏拒绝了，他的拒绝激怒了半藏。两兄弟之间的怨恨最终导致了一场生死对决，源氏也因此差点送命。</p>"
		}
	}

}

Answer 1

Dell 2019-03-16 23:14:17

数据类型的问题，fromJS和toJS转化这块，你仔细梳理一下，问题就在这里。

• 提问者 小六卡脸 #1

  异步获取的是普通JS数据，在changeDetail函数里面把数据用fromJS转换为immutable对象，初始的defaultState里面也是immutable对象，我感觉好像数据类型没有出错吧。

• Dell 回复 提问者 小六卡脸 #2

  return state.merge({
              overview: action.overview,
              story: action.story
          }) 加个fromJS，你看看好不好用，你感觉的真不太准。

• 提问者 小六卡脸 回复 Dell #3

  const changeDetail = (overview,story)=> ({
      type: constants.CHANGE_DETAIL,
      overview: fromJS(overview),
      story: fromJS(story)
  })，我在changeDetail里面已经做过一次转换类型了，还需要在merge这里在转换一次吗？？

点开查看后面5条评论