曾尝试通过渲染过程中的状态变化以图标的形式按条件输出状态，但遇到了以下问题：与从数据库接收的数据相比，状态值正确地输出到控制台，但它始终写入状态，无论状态值（变量 statBlue、statEmpty）、iconBlue 的值为 true 和 iconEmpty 的值为 false。因此，屏幕上显示的不是正确的图标，而只是与iconBlue对应的图标。
还会出现一个警告，并讨论该主题：
警告：无法从不同组件的函数体内更新组件。 https://github.com/facebook/react/issues/18178
也许有不同的方法来检查状态并显示图标？
import React, { useState, useEffect } from 'react';
import { Text, View, FlatList, SafeAreaView } from 'react-native';
type Note = {
commentId: number;
systemName: string;
commentStatus: string;
};
const DirectionLayout = () => {
const [iconBlue, setIconBlue]= useState<boolean>(false);//Устранено без просрочки
const [iconEmpty, setIconEmpty]= useState<boolean>(false);//Не устранено без просрочки
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState<Note[]>([]);
const getNotes = async () => {
try {
const response = await fetch('https://...');
const json = await response.json();
setData(json);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
useEffect(() => {
getNotes();
}, []);
const iconFunction = (status: string) => {
console.log((status == 'Устранено'));
const statBlue = (status === 'Устранено');
const statEmpty = (status === 'Не устранено');
console.log(statBlue);
console.log(statEmpty);
//if ((status == 'Не устранено')==false){setIconBlue(true);}
//if ((status == 'Не устранено')==true){setIconEmpty(true);}
setIconBlue(statBlue);
setIconEmpty(statEmpty);
console.log(iconBlue);
console.log(iconEmpty);
};
return (
<SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
<View style={{
flex: 1, alignItems: 'center'
}}>
{ isLoading ? (
<ActivityIndicator />
) : (
<FlatList
style={{width: '100%'}}
data={data}
keyExtractor={({commentId}) => commentId}
renderItem={({item}) => (
<View style={{ backgroundColor: '#E0F2FE', width: '100%', height: 32, justifyContent: 'center', marginBottom: 41, borderRadius: 8}}>
<Text style={{ fontSize: 16, color: '#334155', textAlign: 'left' }}>{item.systemName}</Text>
<View style={{width: '7%', marginStart: 2, justifyContent: 'center'}}>
{iconFunction(item.commentStatus)}
{iconBlue ? ( <Ionicons name="checkmark-circle" size={25} color="#0072C8" />): (<View/>) }
{iconEmpty ? ( <Ionicons name="checkmark-circle" size={25} color="#F0F9FF" />):(<View/>)}
</View>
</View>
)}
/>
)}
</View >
</SafeAreaView >
);
};
export default DirectionLayout;
当尝试以以下方式显示图标时：
{(item.commentStatus ='Устранено') ? ( <Ionicons name="checkmark-circle" size={25} color="#0072C8" />): ''}
我遇到了这个问题：
（NOBRIDGE）错误警告：错误：对象作为 React 子项无效（发现：带有键 {if} 的对象）。如果您想要渲染子项集合，请改用数组。
