不可变的 JS - getIn() 返回未定义但在浏览器的控制台中工作答案

【问题标题】：Immutable JS - getIn() returns undefined but works in console from the browser不可变的 JS - getIn() 返回未定义但在浏览器的控制台中工作
【发布时间】：2017-01-03 08:53:36
【问题描述】：

这是我的代码中的一个 sn-p：

this.state = {
      data: Immutable.Map({
        gender: "",
        provinces: Immutable.Map(),
        activeProvince: this.props.defaultProvince,
        activeCity: this.props.defaultCity,
      })
    }


let cities = this.state.data.getIn(['provinces', '354']);


The structure would look like this:

state{

  gender: "",
  activeProvince: "354",
  provinces: { 
    354: { 
      name: "abc",
      cities: Immutable.Map()
    }, 

    123: { 
      name: "def", 
      cities: Immutable.Map() 
    }
}

获取“省”仅返回一个大小为 87 的地图，这意味着它具有价值，但再深入 1 级会给我一个未定义的结果。从浏览器在控制台中执行此操作会给我预期的结果。

我是在“返回”之前从 render() 开始的

render(){

    let provinces = this.state.data.get('provinces')
      .sortBy( province => province.get('name') )
      .map( (value, key) => {
        return { text: value.get('name'), value: key }
      });

    // Supposed to do the same thing as above (provinces)
    // with ['provinces'] only it returns a value, adding '354' returns undefined.
    let cities = this.state.data.getIn(['provinces', '354']);

    console.log(cities);

-- 编辑--

通过'toObject()'将省份地图转换为对象显示键存在，那么为什么getIn('provinces,'354')显示未定义？

【问题讨论】：

标签： reactjs reactjs-flux immutable.js

【解决方案1】：

当我尝试重现您的问题时，我注意到 provinces 键及其一级子项是不可变的，但 name 和 cities 键实际上是可变的。这就是为什么，我在包含sortByfunction 的行上遇到错误。为了解决这个问题，你需要用Immutable.fromJS()而不是Immutable.Map()来定义provinces。 Immutable.Map() 仅将对象转换为不可变的级别。但是，Immutable.fromJS() 将所有级别转换为不可变的。

【讨论】：

它实际上是不可变的。我只是展示了它的样子。现在可以工作了。由于初始省份状态为空，我遇到了导致渲染停止的错误。