React Native - 掛鈎 useState 空數組

Question

考慮 React Native 中的以下代碼：

import React, { useState } from 'react';
import { Text, View } from 'react-native';

export default function App() {
  const [recommendations, setRecommendation] = useState<any[]>([]);
  return (
    <View>
      {recommendations != [] ? 
      (
        <Text>A</Text>
      ) : (
        <Text>B</Text>
      )}
    </View>
  );
}

目前這總是返回 A 而從不進入 B。為什么？

Answer 1

簡而言之，因為條件recommendations != []總是評估為真。 如果要比較 arrays，則需要進行深入比較。 這篇文章可能會有所幫助： 如何比較 JavaScript 中的 arrays？

Answer 2

您使用的表達式始終返回true 。 這就是為什么你得到 A 為 output。

如果要在數組中沒有元素時返回B，而在有元素時返回A，可以使用數組的長度來實現。

import React, { useState } from 'react';
import { Text, View } from 'react-native';

export default function App() {
  const [recommendations, setRecommendation] = useState<any[]>([]);
  return (
    <View>
      {recommendations.length ? 
      (
        <Text>A</Text>
      ) : (
        <Text>B</Text>
      )}
    </View>
  );
}

Answer 3

MDN 文檔對比較運算符進行了以下說明：

比較的特點：

• 當兩個字符串具有相同的字符序列、相同的長度和對應位置的相同字符時，它們是嚴格相等的。
• 當兩個數字在數值上相等（具有相同的數值）時，它們是嚴格相等的。 NaN不等於任何東西，包括 NaN。 正零和負零彼此相等。
• 如果兩個 Boolean 操作數都為true或都為false ，則它們是嚴格相等的。
• 對於嚴格或抽象比較，兩個不同的對象永遠不會相等。
• 僅當操作數引用相同的 Object 時，比較對象的表達式才為真。
• Null 和 Undefined Types 嚴格相等，抽象上彼此相等。

...

如果兩個操作數都是對象，則當操作數引用 memory 中的不同對象時，JavaScript 會比較不相等的內部引用。

對象通過引用進行比較。 數組也是 object。 這意味着[] == []將始終導致false ，因為它們不是完全相同的 object（具有相同的引用）。 這也意味着[] != []出於同樣的原因將始終為true 。

如果要檢查 en 空數組，請使用length屬性：

<View>
  {recommendations.length ? 
  (
    <Text>Not Empty</Text>
  ) : (
    <Text>Empty</Text>
  )}
</View>

這使用了一個空數組的length 0的事實，這是錯誤的。 如果您更明確些， recommendations.length != 0會得到相同的結果。