Question

我很累从render（）中的对象中打印出子数组数据。

数据对象JSON：

{
"genres": [
    {
        "id": 27,
        "name": "aa"
    },
    {
        "id": 878,
        "name": "bb"
    },
    {
        "id": 28,
        "name": "cc"
    },
    {
        "id": 53,
        "name": "dd"
    }
], 
"status": "Released",
"tagline": ""
}

MyMainScreen.js

render() {
    return (
        <Container>
            <Content style={{marginLeft:0,marginRight:0}}>
                <InfoSection key={this.state.data.id} info={this.state.data}/>
            </Content>
        </Container>
    );}

InfoSection .js

const InfoSectionCard = ({ info }) => (
<View>
    <Text style={styles.cardGenreItem}>{info.genres}</Text>
</View>
);
export default InfoSectionCard;

我正在使用.map解决此问题。.它通常无法正常工作。使用JSON.stringify(obj)

时，它可以打印出所有JSON对象

当我尝试

<Text style={styles.cardGenreItem}>{info.genres}</Text>

react错误消息是Invariant Violation：无效的对象作为React子对象（找到：带有键{id，name}的对象）。如果要渲染子级集合，请改用数组。

但是然后添加“ .map”

info.genres.map(item =><Text style={styles.cardGenreItem}>{item.name}</Text>)

react错误消息是TypeError：undefined不是一个对象（正在评估'info.genres.map'）

Answer 1

您的问题不是很清楚，但是我认为json中显示的数据已解析并存储在组件状态中是正确的吗？如果希望InfoSection.js（应为.jsx）在每个元素上显示一个Text组件，则需要执行以下操作：

const InfoSectionCard = ({ info }) => (
    <View>
        {info.genres.map(genre => <Text style={styles.cardGenreItem} key={genre.id}>{genre.name}</Text>}
    </View>
);

导出默认的InfoSectionCard；

在对象中反应本机反应子数组

1 个答案: