Json 如何在flatlist中进行条件渲染
我从一个记录国家名称和人口的API中获取了数据。我有一个搜索列表中的国家名称。我的目标是根据人口在平面列表上的国家名称旁边显示一个小圆圈。如果人口超过100米,圆圈将为红色;如果人口超过10米且小于50米,圆圈将为橙色;如果人口少于10米,圆圈将为绿色。条件呈现是正确的方法吗?或者我可以用另一种方式吗 我目前的代码如下:Json 如何在flatlist中进行条件渲染,json,typescript,react-native,return,react-native-flatlist,Json,Typescript,React Native,Return,React Native Flatlist,我从一个记录国家名称和人口的API中获取了数据。我有一个搜索列表中的国家名称。我的目标是根据人口在平面列表上的国家名称旁边显示一个小圆圈。如果人口超过100米,圆圈将为红色;如果人口超过10米且小于50米,圆圈将为橙色;如果人口少于10米,圆圈将为绿色。条件呈现是正确的方法吗?或者我可以用另一种方式吗 我目前的代码如下: const [filteredData, setFilteredData] = useState<any>(); const [masterData, setMas
const [filteredData, setFilteredData] = useState<any>();
const [masterData, setMasterData] = useState([]);
const [filteredPopulationData, setFilteredPopulationData] = useState<any>();
const [masterPopulationData, setMasterPopulationData] = useState([]);
useEffect(() => {
fetchData();
return () => {};
}, []);
const fetchData = () => {
const apiURL =
"https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-population.json";
fetch(apiURL)
.then((response) => response.json())
.then((responseJson) => {
setFilteredStateData(responseJson);
setMasterStateData(responseJson);
})
.catch((error) => {
console.error(error);
});
};
const SearchFilter = (text) => {
if (text) {
const newData = filteredData.filter((item) => {
const itemData = item.country;
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
setFilteredData(newData);
setSearch(text);
} else {
setFilteredData(masterData);
setSearch(text);
}
if (text) {
const newPopulationData = filteredPopulationData.filter((item) => {
const itemPopulationData = item.population;
const textPopulationData = text.toUpperCase();
return itemPopulationData.indexOf(textPopulationData) > -1;
});
setFilteredPopulationData(newPopulationData);
setSearch(text);
} else {
setFilteredPopulationData(masterPopulationData);
setSearch(text);
}
const renderExtraItem = ({ item }) => {
if ((item.population < 10000000)) {
return (
<View
style={{
width: 10,
height: 10,
borderRadius: 20,
backgroundColor: "green",
}}
/>
);
} if ((item.population >= 10000000 && item.population < 50000000 )) {
return (
<View
style={{
width: 10,
height: 10,
borderRadius: 20,
backgroundColor: "orange",
}}
/>
);
} if ((item.population >= 100000000)) {
return (
<View
style={{
width: 10,
height: 10,
borderRadius: 20,
backgroundColor: "red",
}}
/>
);
}
};
const ItemView = ({ item }) => {
return (
<RectButton
onPress={() => navigate("LocationDataScreen", { name: item.country })}
>
<Text style={[styles.itemStyle, { textTransform: "capitalize" }]}>
{item.id}
{item.country.toUpperCase()}
</Text>
{renderExtraItem(item)}
</RectButton>
);
};
const ItemSeparatorView = () => {
return (
<View
style={{
height: 1.5,
width: "90%",
marginLeft: 35,
backgroundColor: "#f3f2f8",
}}
/>
);
};
return (
<FlatList
data={filteredData}
keyExtractor={(item, index) => index.toString()}
ItemSeparatorComponent={ItemSeparatorView}
renderItem={ItemView}
style={styles.listcontainer}
/>
)
const[Filteredata,setFilteredata]=useState();
const[masterData,setMasterData]=useState([]);
常量[filteredPopulationData,setFilteredPopulationData]=useState();
const[masterPopulationData,setMasterPopulationData]=useState([]);
useffect(()=>{
fetchData();
return()=>{};
}, []);
常量fetchData=()=>{
常数apiur=
"https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-population.json";
获取(APIRL)
.then((response)=>response.json())
.然后((responseJson)=>{
setFilteredStateData(responseJson);
setMasterStateData(responseJson);
})
.catch((错误)=>{
控制台错误(error);
});
};
const SearchFilter=(文本)=>{
如果(文本){
const newData=filteredData.filter((项)=>{
const itemData=item.country;
const textData=text.toUpperCase();
返回itemData.indexOf(textData)>-1;
});
SetFilteredata(新数据);
集合搜索(文本);
}否则{
设置过滤器数据(主数据);
集合搜索(文本);
}
如果(文本){
const newPopulationData=filteredPopulationData.filter((项)=>{
const itemPopulationData=item.population;
const text populationdata=text.toUpperCase();
返回itempowlationdata.indexOf(textpowlationdata)>-1;
});
setFilteredPopulationData(新人口数据);
集合搜索(文本);
}否则{
setFilteredPopulationData(主填充数据);
集合搜索(文本);
}
const renderestraItem=({item})=>{
如果((项目数量<10000000)){
返回(
);
}如果((item.population>=10000000和&item.population<50000000)){
返回(
);
}如果((item.population>=100000000)){
返回(
);
}
};
const ItemView=({item})=>{
返回(
导航(“LocationDataScreen”,{name:item.country})
>
{item.id}
{item.country.toUpperCase()}
{renderestraItem(项目)}
);
};
常量ItemSeparatorView=()=>{
返回(
);
};
返回(
index.toString()}
ItemSeparatorComponent={ItemSeparatorView}
renderItem={ItemView}
style={styles.listcontainer}
/>
)
您可以简单地使用一个函数,根据所述条件显示自定义元素
const renderExtraItem = (item) => {
if (item.population > 100000000) {
//render some custom view
return (
<View />
)
}
if (item.population > 10000000 && item.population < 50000000) {
// render something else
return (<View />)
}
// render a default
return (<View />)
}
const ItemView = ({ item }) => {
return (
<RectButton
onPress={() => navigate("LocationDataScreen", { name: item.country })}
>
<Text style={[styles.itemStyle, { textTransform: "capitalize" }]}>
{item.id}
{item.country.toUpperCase()}
</Text>
{renderExtraItem(item)}
</RectButton>
);
};
const renderestraItem=(项)=>{
如果(item.population>100000000){
//渲染一些自定义视图
返回(
)
}
如果(item.population>10000000和&item.population<50000000){
//渲染其他东西
返回()
}
//渲染默认值
返回()
}
const ItemView=({item})=>{
返回(
导航(“LocationDataScreen”,{name:item.country})
>
{item.id}
{item.country.toUpperCase()}
{renderestraItem(项目)}
);
};
是的,这是正确的方法。注意
population>=xx
或population>xx
您的代码可能如下所示:
constYourItemComponent=({population})=>{
//基于总体返回颜色的函数
常量getCircleColor=(总体)=>{
如果(人口>=100000000)返回“红色”;
如果(人口>=10000000&&population<50000000)返回“橙色”;
返回“绿色”;
};
返回(
...
...
);
}
执行此操作时,所有的小圆圈都是相同的颜色,即使我在每个if语句中为每个视图组件设置了不同的颜色。@dannym是一个字符串或数字?在条件语句中尝试parseInt(item.population,10)
,以消除填充为字符串的情况。填充为数字
,您可以检查json文件以确保。我还更新了我的代码以显示您的答案。让我知道它是否正确。谢谢你。但是,什么是YourItemComponent
,我应该把它放在代码的什么地方?当我尝试这样做时,所有的圆圈都是红色的。我已更新代码以包含人口数据。对您来说,这意味着ItemView
。我写它只是为了解释一下。