React Native - hooks useState empty array

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 != []总是计算为 true。如果要比较数组，则需要进行深入比较。这篇文章可能会有所帮助：如何在 JavaScript 中比较数组？

Answer 2

您使用的表达式始终返回true。这就是为什么你得到 A 作为输出。

如果要在数组中没有元素时返回 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。正零和负零彼此相等。
• 如果两个布尔操作数都true或两个都是false，则两个布尔操作数严格相等。
• 对于严格或抽象的比较，两个不同的对象永远不会相等。
• 仅当操作数引用同一对象时，比较对象的表达式才为真。
• Null 和未定义类型严格等于它们自己，并且在抽象上彼此相等。

。

如果两个操作数都是对象，那么当操作数引用内存中的不同对象时，JavaScript 会比较不相等的内部引用。

对象通过引用进行比较。数组也是一个对象。这意味着[] == []将始终导致false因为它们不是完全相同的对象(具有相同的引用(。这也意味着出于同样的原因，[] != []将始终true。

如果要检查 en 空数组，请使用length属性：

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

这使用了空数组有length0的事实，这是假的。如果你宁愿更明确recommendations.length != 0会有相同的结果。