我想在 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