我想在 react-native 中使用三元运算符我该如何修复我的代码？

Question

嗨，我想使用三元运算符

如果烹饪有价值，我想呈现

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

但是如果cookup有这样的[]

我想渲染

           <Hey>hiaaaaaa</Hey>

这是我的代码

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

我怎样才能做到这一点？？ 我该如何修复我的代码？

Answer 1

您可以在 flatlist 中使用 ListEmptyComponent 道具

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

这将在数据为空时呈现“hiaaaaaa”。 无需通过三元运算符 go。

Answer 2

尝试这样的事情：

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

在 JSX 中编写 JS 时不要忘记使用 {}。 其他只是 JavaScript，您可能应该在框架之前深入研究一下。

Answer 3

应该很简单：

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

Answer 4

试试这个方法，

cookUp是一个空数组，因此您必须检查长度以验证数据是否为空。

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

Answer 5

空Array为真。

检查cookUp为true后，您可以在cookUp上使用isArray方法：

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