反应钩子：无法使用地图功能创建列表

Question

我有一组对象，它们作为道具传递给子组件。在子组件中，我想映射该数组以显示在列表中。但是我得到了这个错误

无效尝试破坏不可迭代的实例

这是我的孩子：

const ServiceTabs = (props) => {
  const [parentProps] = props;
  return (
    <ul>
      {
          parentProps.map((content) => (
            <li key={content.id} className="active">
              <BtnButton
                btnStyle={content.btnStyle}
                btnColor={content.btnColor}
                customTitle={content.customTitle}
                IconSRC={content.IconSRC}
              />
            </li>
          ))
}
    </ul>
  );
};

这是我的父母：

 const ServiceCategory = () => {
      const [serviceState, setserviceState] = useState([
        {
          id: 1,
          customtitle: 'hair', 
          btnStyle: {
            backgroundColor: '#fff',
            width: '100px',
            height: '100px',
            flexDirection: 'column',

          },
        },
        {
          id: 2,
          .
          .
          },        
      ]);
.
.
.
 <ServiceTabs list={serviceState} />

当我将const [parentProps] = props;更改为const parentProps = props;时，错误更改：

parentProps.map不是函数我认为我的问题是道具变形。但是我不知道该怎么做。希望我的问题很清楚。

Answer 1

将const [parentProps] = props;更改为const {list: parentProps} = props;

注意，此上下文中的[]用于解构数组，这就是为什么它显示错误的原因：

无效尝试破坏不可迭代的实例

在解构对象时，应在析构函数中传递要从源对象获取的字段。可以在这里找到更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 2

您应该像这样破坏列表属性，然后映射到该变量：

const { list } = props
list.map(content => {...})

Answer 3

正如@Clarity在评论中指出，我通过更改解决了问题

const [parentProps] = props;

to

const parentProps = props;

和

parentProps.map((content) => (

to

parentProps.list.map((content) => (

Answer 4

您应该使用

props.parentProps.map(content => {...})