React Native删除SearchBar最后一位字符触发Text字符串渲染错误

你遇到的报错是由JSX的&&运算规则和React Native的渲染规则共同导致的：

• JSX中&&运算符的返回逻辑是：如果左侧为假值，直接返回左侧值本身，而非布尔值false。当你删除到最后一个字符时，value变为空字符串''，属于假值，此时整个{value && <AntDesign ... />}表达式的返回结果就是''。
• React Native规定所有字符串类型的内容（哪怕是空字符串）必须包裹在<Text>组件内才能渲染，只有false、null、undefined这几种值会被直接忽略、不会渲染。
• 空字符串''属于字符串类型，没有被<Text>包裹就尝试渲染，自然就抛出了Error: Text strings must be rendered within a <Text> component错误。

你写的{!!value && <AntDesign name="closecircle" size={20} onPress={onDelete} />}修复写法完全正确：
!!会强制把任意类型的值转换为布尔值，空字符串''两次取反后会变成false，此时&&表达式返回false，不会被渲染，自然不会触发报错。

还有两种等价的可选写法：

• 三元运算符：{value ? <AntDesign name="closecircle" size={20} onPress={onDelete} /> : null}
• 字符串长度判断：{value?.length > 0 && <AntDesign name="closecircle" size={20} onPress={onDelete} />}

额外优化建议：你在onDelete里调用setTextSearch()没有传参数，会把textSearch设为undefined，建议显式传空字符串setTextSearch('')，避免TextInput的value为undefined引发其他潜在问题。

内容的提问来源于stack exchange，提问作者Zuet