文本字符串必须在Text React Native中呈现

Question

我的<SearchBar>有问题，我真的不知道错误在哪里。

这是我的搜索栏

SearchBar({onChange, value, onDelete}) {
return (
<View style={styles.container}>
<View style={styles.searchBar}>
<AntDesign name="search1" size={20} />
<TextInput onChangeText={onChange} value={value} />
</View>
/* wrong */ {value && <AntDesign name="closecircle" size={20} onPress={onDelete} />}
/* fix*/ {!!value && <AntDesign name="closecircle" size={20} onPress={onDelete} />}
</View>
);
}

在Parent中调用

const onSearch = value => {
setTextSearch(value);
let filtered = people.filter(function (person) {
return removeVietnameseTones(person.fullName)
.toLowerCase()
.includes(removeVietnameseTones(value).toLowerCase());
});
setFilteredPeople(filtered);
};
<SearchBar
onChange={value => onSearch(value)}
onDelete={() => {
setTextSearch();
setFilteredPeople(people);
}}
value={textSearch}
/>

一切都在工作，但当我删除textSearch的最后一个字母，我的应用程序将有字符串错误。他们说:

错误:文本字符串必须在组件内呈现

。

谢谢你。

Answer 1

这一行导致了问题

value && <AntDesign name="closecircle" size={20} onPress={onDelete} />

所以当value是空字符串时，react native认为它是假值，不呈现下一个语句，但同时它返回值

所以react native尝试渲染值(意思是"或空字符串")和字符串必须在文本块

中呈现将值转换为布尔值

!!value && <AntDesign name="closecircle" size={20} onPress={onDelete} />

或

Boolean(value) && <AntDesign name="closecircle" size={20} onPress={onDelete} />