Question

componentWillReceiveProps已过时，但是，如何迁移它尚不清楚。例如，我当前版本的简化版本如下所示：

import Reorder, {reorder, reorderImmutale, reorderFromTo, reorderFromToImmutable} from 'react-reorder'

class ObjectsArea extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
        items: this.props.objects ? this.props.objects.items : []
    };
  }

  componentWillReceiveProps(nextProps){
    //May have to do a deep compare between nextProps.items and current items?
    if (nextProps.objects){
        this.setState({items: this.nextProps.objects.items})
    }
  }

  onReorder (event, previousIndex, nextIndex, fromId, toId) {
    let new_items = reorder(this.state.items, previousIndex, nextIndex)
    this.setState({
      items: new_items
    });
    //call to parent function
  }

  render(){
    orderable_items = <Reorder reorderId="objects" onReorder={this.onReorder.bind(this)}>
        {
            this.state.items.map(item => (
                <div key={item.id}>
                    {item.text}
                </div>
             ))
         }
    </Reorder>

    return (
         <div>{orderable_items}</div>
    )

}

我的要求：

有时没有对象属性（初始加载时没有对象）
当存在对象属性时，将使用react-reorder组件创建可排序/可拖动的列表
拖动列表中的项目以重新排列时，将调用onReorder函数。
onReorder函数应该做两件事：更新屏幕上的列表，调用从props传入的父函数。

当前所有这些都可以与componentWillReceiveProps一起使用，但是，根据上述要求，从componentWillReceiveProps迁移出来的正确方法是什么？

Answer 1

在遇到问题时可以解决。

static getDerivedStateFromProps(nextProps, prevState){
  if (nextProps.objects){){
     return {items: this.nextProps.objects.items};
  }
  else return null;
}

请按照this post进行谅解

Answer 2

尽管Tolsee的答案是完全正确的，但也值得一提的是react文档建议完全删除（基于道具计算的状态）。我认为a great article here是一本好书。

您的示例非常适合Anti-pattern: Unconditionally copying props to state示例。

在不知道您的环境的情况下，我当然不能推荐解决方案，但对我来说，您似乎可以使用Fully controlled component示例。

在这种情况下，您需要lift your state up，只需使用objects.items来渲染您的Reorder子级，并且在onReorder事件期间，只需调用一个您作为道具被接收。

从componentWillReceiveProps迁移

2 个答案: