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

Question

我有一个对象数组，这些对象作为 props 传递给子组件。 在子组件中，我想将该数组映射到列表中。 但我收到此错误

解构不可迭代实例的尝试无效

这是我的孩子：

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 { list } = props
list.map(content => {...})

这是一个有效的代码沙箱示例，使用(大部分(您的代码来说明我的意思：https://codesandbox.io/s/distracted-pasteur-k8387?fontsize=14&hidenavigation=1&theme=dark

Answer 2

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

const [parentProps] = props;

自

const parentProps = props;

和

parentProps.map((content) => (

自

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

Answer 3

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

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

解构不可迭代实例的尝试无效

当你解构一个对象时，你应该在析构函数中传递你想要从源对象中获取的字段是什么。更多信息可以在这里找到：

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

Answer 4

你应该使用

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