Javascript 如何在react native中使用条件运算符？？发生此错误

native和我希望在组件中使用条件运算符

但是，当我尝试在react native中使用条件运算符时，就会出现这种错误

这是我的密码

            import React from 'react';
            import styled from 'styled-components/native';
            import {FlatList} from 'react-native';
            import {useSelector,useDispatch} from 'react-redux';

            const Container = styled.View`

            `;

            const Hey = styled.Text`

            `;

            const Food = ({navigation}) => {

                const {cookUp} = useSelector((state) => state.post);


                console.log("cookUp:",cookUp);
            

                return (
                    {cookUp ? (
                <FlatList
                data={cookUp}
                keyExtractor={(item) => String(item.id)}
                // keyExtractor={(item, index) => {
                //     return `${index}`;
                // }}
            renderItem={({item}) => (
                <Hey>
                    {item.name}
                </Hey>
            )}
                />
                    ) : (<Hey>hi</Hey>)

            }
            
                );
            };

            export default Food;

从“React”导入React；
从“样式化组件/本机”导入样式化；
从“react native”导入{FlatList}；
从“react-redux”导入{useSelector，useDispatch}；
const Container=styled.View`
`;
const Hey=styled.Text`
`;
常量食物=（{navigation}）=>{
const{cookUp}=useSelector（（state）=>state.post）；
日志（“cookUp:，cookUp”）；
返回(
{烹饪(
字符串（item.id）}
//keyExtractor={（项，索引）=>{
//返回`${index}`；
// }}
renderItem={（{item}）=>(
{item.name}
)}
/>
)：（嗨）
}
);
};
出口违约食品；

这是一个错误

---

我不知道我怎样才能修复。。。我如何才能做到这一点？

请尝试删除返回函数中的花括号

return (
    cookUp ? (
        <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />
    ) :
        (<Hey>hi</Hey>)
);

返回(
烹饪(
字符串（item.id）}
//keyExtractor={（项，索引）=>{
//返回`${index}`；
// }}
renderItem={（{item}）=>(
{item.name}
)}
/>
) :
（嗨）
);

花括号用于JSX标记中的动态值。在本例中，三元运算符位于标记之外，因此不需要大括号。取下最外层的花括号（烹饪前打开的花括号？…）