根据条件显示图标

曾尝试通过渲染过程中的状态变化以图标的形式按条件输出状态，但遇到了以下问题：与从数据库接收的数据相比，状态值正确地输出到控制台，但它始终写入状态，无论状态值（变量 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} 的对象）。如果您想要渲染子项集合，请改用数组。