1
配列を含むコンポーネントがあり、この配列を子コンポーネントに渡し、mapを使用して配列の要素に基づいてアイテムをレンダリングします。しかし、配列でマップを使用しようとすると、Reactが配列としての小道具を認識していないようです。子要素に小道具として渡されたときにネイティブ配列が反応しない
未定義はオブジェクトではありません（ 'Evaluating 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} />
と子：
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>
}
}
だから私の質問は本当にです：どのように私は正しく子コンポーネントに配列を伝承しますか？
質問を書いたときに私が作ったタイプミスです。これは私のコードにはなく、明らかにエラーの原因ではありません。問題は解決しません。私が小道具として配列を渡すと、子は配列としてそれを見ない。 そして、ところで。 this.props.foodTagList [i]の代わりにx [i]を使用すると、どちらも機能しません。 –
サーバーからデータを取得しているのですか、それともハードコードされていますか？ 'info = {this.props.foodTagList [i]} 'を使わないでください。' info = {x} 'を使うと、xはインデックスを必要としません。 –
"マップはオブジェクトであり、関数ではないと思うので..."とはいえ、 'this.props.foodTagList'は' undefined'とは思えません。不正な小道具を渡すコンポーネントを調べるには、 'FoodTags'コンポーネント' static propTypes = {foodTagList：PropTypes.array.isRequired} 'のプロパティタイプを指定してください。 –