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

Question

本机，我想在组件中使用条件运算符

但是当我尝试在 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;

这个错误发生

我不知道我该如何解决...我该怎么做？

Answer 1

尝试删除返回函数中的大括号。

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