React Native中keyword.toLowerCase不是函数错误的排查与修复

错误原因 #

问题根源在于TextInput的onChange回调参数不是输入的文本字符串，而是一个事件对象。你调用setKeyword(text)时，这里的text实际是Event实例，并非字符串，所以后续调用keyword.toLowerCase()时，事件对象没有这个方法，自然抛出错误。你之前尝试用ToString()无效，是因为转换的是事件对象，不是真正的输入文本。

修复方案 #

方案1：改用onChangeText（推荐） #

React Native的TextInput提供了onChangeText回调，它会直接把输入的文本字符串作为参数传递，这是处理输入文本的标准方式：

修改TextInput部分代码：

<TextInput placeholder='Search'
    style={styles.searchbar}
    onChangeText={(text) => setKeyword(text)} // 替换onChange为onChangeText
/>

方案2：从Event对象提取文本（不推荐，繁琐） #

如果坚持使用onChange，需要从事件对象中手动取出输入值：

<TextInput placeholder='Search'
    style={styles.searchbar}
    onChange={(event) => setKeyword(event.nativeEvent.text)}
/>

额外兜底处理（可选） #

为避免其他意外情况导致keyword非字符串，可以在调用toLowerCase()前做类型校验兜底：

else if (
    chat.username.toLowerCase().includes(
        typeof keyword === 'string' ? keyword.toLowerCase() : ''
    )
)

修复后的核心代码片段 #

// ...
<TextInput placeholder='Search'
    style={styles.searchbar}
    onChangeText={(text) => setKeyword(text)}
/>
// ...
chats.filter((chat) => {
    if (!keyword) { // 空字符串时返回所有结果
        return true;
    }
    const lowerKeyword = keyword.toLowerCase();
    return chat.username.toLowerCase().includes(lowerKeyword);
})
// ...

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