Question

我有一个包含数组的组件，我想将此数组传递给子组件，并使用map根据该数组的元素呈现项目。但是，当试图使用数组映射时，React似乎不会将prop识别为数组，因为我收到以下错误：

未定义不是对象（＆＃39;评估this.props.foodTagList.map＆＃39;）

所以它认为地图是一个对象，而不是一个函数......

简而言之，父母：

const food = { TagList:[
    {
        TagId: 4,
        TagName: "onion"
    },
    {
        TagId: 6,
        TagName: "beef"
    },
    {
        TagId: 7,
        TagName: "pork"
    },
    {
        TagId: 8,
        TagName: "carrot"
    },
    {
        TagId: 9,
        TagName: "fish"
    }
]};

<FoodTags foodTagList={food.TagList} />

和孩子：

export default class FoodTags extends React.Component{

constructor(props){
    super(props);
}

shouldComponentUpdate(nextProps, nextState){
    return false;
}

render(){
    return <View style={layoutStyles.tagWrapper}>
        {this.props.foodTagList.map((x, i) => {
            return( <Tag key={i} info={this.props.foodTagList[i]} />)
        })}
    </View>
}

}

class Tag extends React.Component{
constructor(props){
    super(props);
}

render(){
    return <Text style={foodStyles.tag}>{this.props.info.TagName}</Text>
}

}

所以我的问题是：我如何正确地将数组传递给子组件？

Answer 1

我觉得foodTagList在您最初渲染时实际上是undefined，而且您return false根本没有得到数据。如果它认为map是一个对象而不是一个函数，那么你将获得Uncaught TypeError: map is not a function或类似的东西。您可以尝试在true中返回shouldComponentUpdate。

当作为道具传递给子组件时，React Native Array无法正常工作

1 个答案: