无法分配我的 JSON 以使用平面列表进行动态显示

Question

我试图检查我的JSON数组与一堆条件。我的目标是使整个视图动态。我试图指定两种不同的渲染，但它发生无限或太长操作在我的for循环。我希望你能帮忙。

如果我取消If语句中的console.log()行注释，我可以很容易地看到过滤的数据，在useEffect中使用它而不是返回。但是，如果我添加返回语句并尝试显示我的组件，它会给我无限或太长(我看不到结束，这就是不将其分配为无限或太长的原因)操作。

function renderItems() {
if (data && data.attributes?.items) {
let response = data.attributes.items;
for (let i = 0; i < response.length; i++) {
if (Object.keys(response[i].options).length > 0) {
return (
<View>
<CustomDropdown text={response[i].name} />
</View>
);
//console.log(response[i].name + " is dropdown");
} else if (Object.keys(response[i].options).length == 0) {
return (
<View>
<Text>TextBox!</Text>
</View>
);
//console.log(response[i].name + " is text");
}
}
console.log("finish");
}
}
function renderFlatList() {
if (data && data.attributes?.items) {
return <FlatList renderItem={renderItems} data={data.attributes.items} />;
}
}
return (
<View style={styles.container}>
<StatusBar style="light" />
<View style={{ backgroundColor: "#fff", padding: 20, borderRadius: 15 }}>
{renderFlatList()}
</View>
</View>
);
};

Answer 1

renderItems将返回一个项作为参数。所以不需要循环

function renderItems({item}) {
if (Object.keys(item.options).length > 0) {
return (
<View>
<CustomDropdown text={item.name} />
</View>
);
} else if (Object.keys(item.options).length == 0) {
return (
<View>
<Text>TextBox!</Text>
</View>
);
//console.log(item.name + " is text");
}
}