React组件如何将传入的Prop元素设置到自身State中？

我来帮你搞定这个问题～你现在正在通过映射数组生成多个Card组件，每个组件都传入了对应的对象作为dataItems props，你的代码是这样的：

const bottomData = [ 
  { name: 'Beneficial Owner Details', id:'1', }, 
  { name: 'Residential Address', id:'2', },
]

mapData() { 
  return bottomData.map(list => <Card key={list.id} dataItems={list}/>) 
}

而你在Card类组件里想要把传入的dataItems里的内容同步到组件的state中，目前的Card组件代码只写了一部分：

export default class Card extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { sectionId: '' } 
  } 
  // sectionPr... 后面的代码还没写完
}

下面给你两种常用的解决方案，根据你的实际需求选择：

方案1：仅初始化时同步State #

如果你的dataItems props在组件挂载后不会发生变化，只需要在组件初始化的时候把props的值放到state里，那直接在构造函数里处理就好：

export default class Card extends Component { 
  constructor(props) { 
    super(props); 
    // 从传入的dataItems中提取id赋值给sectionId
    this.state = { 
      sectionId: props.dataItems?.id || '' 
    } 
  } 

  // 后续的组件逻辑...
}

这里用?.可选链操作符是为了防止dataItems未传入时出现报错，如果你能确保父组件一定会传入dataItems，也可以直接写props.dataItems.id。

方案2：Props更新时同步State #

如果后续父组件可能会更新dataItems的值，你需要让Card组件的state跟着一起更新，这时候可以用getDerivedStateFromProps这个生命周期方法：

export default class Card extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      sectionId: props.dataItems?.id || '' 
    } 
  } 

  // 当props发生变化时，对比并更新state
  static getDerivedStateFromProps(nextProps, prevState) {
    // 检查新传入的dataItems.id和当前state的sectionId是否不同
    if (nextProps.dataItems?.id !== prevState.sectionId) {
      return {
        sectionId: nextProps.dataItems?.id || ''
      };
    }
    // 返回null表示不需要更新state
    return null;
  }

  // 后续的组件逻辑...
}

另外，如果你的项目允许使用函数组件，用useState加useEffect会更简洁：

import { useState, useEffect } from 'react';

export default function Card(props) {
  const [sectionId, setSectionId] = useState('');

  // 当dataItems变化时更新state
  useEffect(() => {
    setSectionId(props.dataItems?.id || '');
  }, [props.dataItems]);

  // 后续的组件逻辑...
}

内容的提问来源于stack exchange，提问作者Danutha Fernando