Question

我面临返回包含嵌套映射数组的渲染的困难

renderData(data) {
return (
    <View>
        {
            data.map((myData, index1) => {
                return (
                    <Text key={'ev' + index1}>{myData.name}</Text>
                myData.children.map((children, index2) => {
                    return (
                        <Text key={'pi' + index2}>{children.id}</Text>
                    )
                })
            )
            })
        }
    </View>
)
}

这使我陷入语法错误。正确的方法是什么？

我还尝试将第二个函数放在方括号中

renderData(data) {
  return (
    <View>
        {
            data.map((myData, index1) => {
                return (
                    <Text key={'ev' + index1}>{myData.name}</Text>
                    {
                       myData.children.map((children, index2) => {
                        return (
                            <Text key={'pi' + index2}>{children.id}</Text>
                        )
                      })
                    }
            })
        }
    </View>
)
}

Answer 1

使用花括号将第二个地图函数包装起来

const renderData = data => {
return (
    <View>
    {data.map((myData, index1) => {
        return (
        <>
            <Text key={"ev" + index1}>{myData.name}</Text>
            {myData.children.map((children, index2) => {
                return <Text key={"pi" + index2}>{children.id}</Text>;
            })}
        </>
        );
    })}
    </View>
);
};

使用嵌套数组在本机上进行嵌套渲染

1 个答案: