Reactjs 当作为道具传递给子组件时，React本机数组不工作

我有一个包含数组的组件，我想将这个数组传递给一个子组件，并使用map根据该数组的元素渲染项目。但是，当尝试将map与数组一起使用时，React似乎无法将道具识别为数组，因为我得到以下错误：

Undefined不是对象（'计算this.props.foodTagList.map'）

---

所以它认为地图是一个物体而不是一个函数

简言之，家长：

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} />

const food={TagList:[
{
塔吉德：4，
标记名：“洋葱”
},
{
塔吉德：6，
标记名：“牛肉”
},
{
塔吉德：7，
标记名：“猪肉”
},
{
塔吉德：8，
标记名：“胡萝卜”
},
{
塔吉德：9，
标记名：“鱼”
}
]};

儿童：

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>
}

导出默认类FoodTags扩展React.Component{
建造师（道具）{
超级（道具）；
}
shouldComponentUpdate（下一步，下一步状态）{
返回false；
}
render（）{
返回
{this.props.foodTagList.map（（x，i）=>{
返回（）
})}
}

}

class标记扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回{this.props.info.TagName}
}

}

---

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

我感觉在最初渲染时，

foodTagList

实际上是

未定义的

，因为您有

return false

，所以根本无法获取数据。如果它认为

map

是一个对象而不是一个函数，您将得到

uncaughttypeerror:map不是一个函数或类似的东西。你能在
shouldComponentUpdate
中尝试返回
true
吗？我感觉
foodTagList
在你最初渲染时实际上是
未定义的，因为你有
返回false
你根本没有得到数据。如果它认为
map
是一个对象而不是一个函数，您将得到
uncaughttypeerror:map不是一个函数或类似的东西。你能在
shouldComponentUpdate
中尝试返回
true
吗？我在写问题时打错了。它不存在于我的代码中，显然不是错误的来源。问题依然存在。当我将阵列作为道具传递时，孩子不再将其视为阵列。顺便说一下。使用x[i]而不是.props.foodTagList[i]也不起作用。您是从服务器获取数据还是硬编码的？不要使用
info={this.props.foodTagList[i]}
use
info={x}
索引不是x所必需的。“所以它认为map是一个对象而不是一个函数…”不，它认为
this.props.foodTagList
是
未定义的。指定
FoodTags
component
static propTypes={foodTagList:propTypes.array.isRequired}
的属性类型，查看哪个组件传递了不正确的道具。@SimonEliasson代码看起来应该可以工作。你真的需要计算出未定义的在
props.foodTagList
上的位置，你能告诉我
这个.props.foodTagList.isArray（）的结果吗？
？谢谢所有的答案。我学到了很多。我将删除该帖子。我用x语法进行了测试，并摆弄了一些proptypes，突然间，它成功了。但我无法准确指出解决方案是什么，因为当我取消更改时，它仍然有效。所以我可能在某个地方有语法错误。很抱歉浪费了你的时间，但是你留下的评论仍然帮助我修复了它，所以谢谢！取消删除它。我不知道该怎么办。这是我写问题时的一个打字错误。它不存在于我的代码中，显然不是错误的来源。问题依然存在。当我将阵列作为道具传递时，孩子不再将其视为阵列。顺便说一下。使用x[i]而不是.props.foodTagList[i]也不起作用。您是从服务器获取数据还是硬编码的？不要使用
info={this.props.foodTagList[i]}
use
info={x}
索引不是x所必需的。“所以它认为map是一个对象而不是一个函数…”不，它认为
this.props.foodTagList
是
未定义的。指定
FoodTags
component
static propTypes={foodTagList:propTypes.array.isRequired}
的属性类型，查看哪个组件传递了不正确的道具。@SimonEliasson代码看起来应该可以工作。你真的需要计算出未定义的在
props.foodTagList
上的位置，你能告诉我
这个.props.foodTagList.isArray（）的结果吗？
？谢谢所有的答案。我学到了很多。我将删除该帖子。我用x语法进行了测试，并摆弄了一些proptypes，突然间，它成功了。但我无法准确指出解决方案是什么，因为当我取消更改时，它仍然有效。所以我可能在某个地方有语法错误。很抱歉浪费了你的时间，但是你留下的评论仍然帮助我修复了它，所以谢谢！取消删除它。但我不知道该怎么办。在这种情况下，shouldComponentUpdate不是问题所在。在这种情况下，shouldComponentUpdate不是问题所在。
class Tag extends React.Component{
constructor(props){
    super(props);
}

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