问题 在react-js中的immutable-js时使用PropTypes


我在React中使用immutable-js和react-immutable-proptypes。

// CommentBox.jsx
getInitialState() {
    return {
        comments: Immutable.List.of(
            {author: 'Pete Hunt', text: 'Hey there!'},
            {author: 'Justin Gordon', text: 'Aloha from @railsonmaui'}
        )
    };
},
render(){
    console.log(this.state.comments.constructor);
    return (
      <div className='commentBox container'>
        <h1>Comments</h1>
        <CommentForm url={this.props.url} />
        <CommentList comments={this.state.comments} />
      </div>
    );
}


// CommentList.jsx
propTypes: {
    comments: React.PropTypes.instanceOf(Immutable.List),
},

// CommentStore.js
handleAddComment(comment) {
    this.comments.push(comment);
}

当页面初始化时,没问题,一切正常,没有警告。 控制台日志显示 comments 是 function List(value)。 当我添加新评论时,它看起来效果很好,但是有一个警告

警告:propType失败:无效道具 comments 供应给    CommentList,预期的实例 List。检查渲染方法    CommentBox

并且控制台日志显示了 comments 是 function Array()。 那么,为什么呢 comments 构造函数从 List 至 Array

而且我已经读过了 http://facebook.github.io/react/docs/advanced-performance.html#immutable-js-and-flux

消息存储可以使用跟踪用户和消息   两个清单:

this.users = Immutable.List();
this.messages = Immutable.List();

实现要处理的函数应该非常简单   每种有效载荷类型例如,当商店看到有效载荷时   代表一条新消息,我们可以创建一条新记录并追加   它到消息列表:

this.messages = this.messages.push(new Message({
  timestamp: payload.timestamp,
  sender: payload.sender,
  text: payload.text
});

请注意,由于数据结构是不可变的,我们需要分配   push函数的结果是this.messages。


10325
2017-08-23 10:02


起源

this.comments.push(comment) expression返回一个新列表,但不会修改列表(根据定义,因为它是不可变的) - zerkms
我是从这里学到的 facebook.github.io/react/docs/...。 - rubyu2
在那篇文章中,他们将调用的结果分配给属性本身。 - zerkms
“请注意,由于数据结构是不可变的,我们需要将push函数的结果赋给this.messages。”请再次阅读那篇文章。 - zerkms
谢谢。我想我误解了不可改变的。 - rubyu2


答案:


我来到这里寻找一个解决方案,允许一个数组或来自ImmutableJS的任何类型的可迭代对象作为prop传递。如果其他人发现这个有用,这就是我想出的:

PropTypes.oneOfType([
  PropTypes.instanceOf(Array),
  PropTypes.instanceOf(Immutable.Iterable)
]).isRequired

11
2017-11-22 19:33