javascript - React，通过props传递immutable类型数据的疑问，跪求能人解答

问题描述

问 题

render() {
        //通过prop传递给子组件HotelFilterHeader两个 prop， type 和 list
        return (
            <div>
                <HotelFilterHeader type={this.state.data.get('type')} list={this.state.data.get('list')}/>
            </div>
        )
    }

在HotelFilterHeader组件接收到prop后，进行比较。

componentWillReceiveProps(nextProps){
        console.log(Immutable.is(this.props.list, nextProps.list)); // false
        console.log(Immutable.is(this.props, nextProps)); // true
        //为什么一个false一个true啊，按理说list已经false了，props的比较也应该是false啊
    }

为什么一个false一个true啊，按理说list已经false了，props的比较也应该是false啊

解决方案

如果你使用一个嵌套的数组或对象创建 Immutable 对象的话，只有最外面一层是 immutable 的，例如：

var a = Immutable.Map({
  list: [1,2,3],
  obj: {a: 1, b: 2}
})

这样创建的对象只有最外层是不可变的，即使用 a.get('list') 获取到的内容仍然只是一个普通数组，并不是不可变数据。

要想让所有内容都是不可变的就得麻烦一点：

var a = Immutable.Map({
  list: Immutable.List([1,2,3]),
  obj: Immutable.Map({a: 1, b: 2})
})

对比下你的使用方法，应该可以找到问题出在哪里了吧

这篇关于javascript - React，通过props传递immutable类型数据的疑问，跪求能人解答的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！