何时真正使用 getDerivedStateFromProps？

Question

我无法确定我的组件层次结构是否真的需要getDerivedStateFromProps，如果需要它的情况真的像文档所说的那样罕见。这可能是对 React/Redux 设计的根本误解。

class AttributeList extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      attributes: props.attributes,
      newAttributes: []
    }
  }

  addNewAttribute = () => {
      // add new empty attribute to newAttributes state
  }

  onKeyChange = () => {
      // update appropriate attribute key
  }

  onValueChange = () => {
      // update appropriate attribute value
  }

  saveAttributes = () => {
      // save the, API call
  }

  render = () => {
      this.state.attributes.map((pair) => {
          <Attribute
            //pass data + functions, functional component />
      })
      this.state.newAttributes.map((pair) => {
          <Attribute
            //pass data + functions, functional component />
      })
  }

  static getDerivedStateFromProps(){
      // ?? do comparisons here to choose to remove or keep certain newAttributes? or just ignore result of save and keep interface as-is, just show error message if saving failed. 
  } 
}

我有一个父组件AttributeList，它渲染了一堆Attributes，它们本质上是键值对。 AttributeList 接收文档的属性列表作为道具。但是，可以编辑属性，因此它使用this.props.attributes 初始化其状态（this.state.attributes）。通常键是不可变的，但如果用户向列表中添加新属性，他可以同时编辑键和值。在任何时候，用户都可以保存所有属性。保存新属性后，我也想禁用编辑它们的键。这是两难的。

选项一是保存文档并希望它能正常工作，然后清除新属性列表并将所有属性标记为已保存（禁用键输入）。我认为这将是“完全不受控制”的解决方案，一旦状态被初始化，组件就会自行处理所有事情。但是，如果保存失败怎么办？我不想向用户显示不正确的状态。

所以我想做选项二。保存后，获取文档，这将加载属性列表并重新渲染组件。但是我需要摆脱我的新属性，因为它们现在是 attributes 属性的一部分。我想现在验证新属性实际上是 attributes 道具的一部分。这似乎会发生在getDerivedStateFromProps 中，我会在每个渲染周期检查attributes 道具中是否已经存在任何新的属性键，如果存在，则将它们从“新”列表中删除，并返回该状态。

但这真的是使用getDerivedStateFromProps 的正确时机吗？在我看来，对于用户正在“编辑”某些内容的任何页面，如果您想根据保存的数据（“真相”）进行渲染，那么我需要使用 @987654335 @。或者从设计的角度来看，最好显示类似于“数据未成功保存”的消息并保持状态不变，以防止任何数据丢失。老实说，我不确定。

Answer 1

我不明白getDerivedStateFromProps 是如何进入其中的，因为您没有理由需要将道具复制到状态中吗？当旧的属性值改变时，你将它保存到 redux 存储中，当新的属性属性改变时，你可以更新本地状态（或将它们保存到存储的不同部分，或以其他方式区分它们）。更新规则可以在更新处理程序中或在保存合并期间强制执行。

// dispatch redux action to update store
onOldValueChange = () => {}

// this.setState to update new value
onNewKeyChange = () => {}
onNewValueChange = () => {}

render = () => {
  this.props.attributes.map((pair) => {
    <Attribute
      //pass data + onOldValueChange, functional component />
  })
  this.state.newAttributes.map((pair) => {
    <NewAttribute
      //pass data + functions, functional component />
  })
}