React Native根据API值修改Styled Components背景色的实现方案

1. 修正API数据获取逻辑 #

你当前用forEach遍历数组时犯了一个错误：forEach没有返回值（始终返回undefined），导致risk状态无法正确存储levelRiskMorse的值。针对模拟数据的单条任务场景，可直接取数组第一项的风险等级：

const [riskLevel, setRiskLevel] = useState<string>('');

useEffect(() => {                            
    async function getRiskLevel(){
        const { data } = await api.get('allTasks');
        // 若返回多条任务，需调整为遍历存储或按需处理
        if (data.length > 0) {
            setRiskLevel(data[0].levelRiskMorse);
        }
    }
    getRiskLevel();
}, [])

2. 修改Styled组件，支持动态背景色 #

给ContainerRating添加接收风险等级的Props，根据传入的值判断是否设置绿色背景：

import styled from 'styled-components/native';

export const ContainerRating = styled.View<{ levelRiskMorse?: string }>`
    border-width: 0.6px;
    border-color: ${({theme}) => theme.colors.default_color};
    flex-direction: row; 
    justify-content: space-around;                               
    height: 50px;
    align-items: center;
    margin-top: 2px;
    border-left: unset;
    // 匹配NoRisk时设为绿色，否则用默认透明背景
    background-color: ${({ levelRiskMorse }) => 
        levelRiskMorse === 'NoRisk' ? 'green' : 'transparent'};
`;

提示：如果项目使用主题色体系，可把'green'替换为({theme}) => theme.colors.green，保持全局风格统一。

3. 在组件中传递Props给Styled组件 #

将获取到的riskLevel作为Props传入ContainerRating，触发样式判断：

return(
    <View>
        <ContainerRating levelRiskMorse={riskLevel}>
            <Text>Sem Risco</Text>
            <Text>0-24</Text>
        </ContainerRating>                         
    </View> 
)

额外说明 #

• 若API返回多条任务，需将状态改为数组类型（useState<string[]>([])），遍历渲染每个ContainerRating时对应传入每条任务的levelRiskMorse。
• 注意字符串大小写匹配：判断条件需与API返回的"NoRisk"完全一致，避免因大小写错误导致样式不生效。

内容的提问来源于stack exchange，提问作者Matheus Chiarelli