React Native使用autocomplete-input报错：对象无法作为React子元素

该报错的本质是React尝试直接将JS对象作为视图子元素渲染导致，你在类组件阶段没有报错，是因为当时villes是state对象下的数组属性，更新和取值逻辑都符合组件要求，重构后状态定义和renderItem的写法出现了偏差导致报错。结合你提供的代码，按出现概率从高到低给出修复方案：

1. 修正useState初始值 #

类组件中villes是state对象下的属性，初始值为数组，重构为Hooks时很容易误将初始值设为对象：
错误写法：

const [villes, setVilles] = useState({})

正确写法，初始值设为空数组：

const [villes, setVilles] = useState([])

2. 修正renderItem参数写法 #

react-native-autocomplete-input的renderItem回调遵循React Native FlatList的参数规范，回调接收的第一个参数是包含item、index属性的包裹对象，你需要先提取item字段，再获取城市相关属性：
错误写法：

renderItem={({Ville,CP,Num,Lat,Lng,code_com,ArraySameCP}) => <Text>{Ville}</Text>}

正确写法二选一即可：

// 写法1：嵌套解构
renderItem={({ item: { Ville } }) => <Text>{Ville}</Text>}

// 写法2：先取item再访问属性
renderItem={({ item }) => <Text>{item.Ville}</Text>}

3. 检查状态更新逻辑 #

确认两处逻辑的返回值为数组类型：

• onChangeText中过滤城市列表的逻辑，返回结果是数组
• 调用setVilles时传入的参数是数组，不要传入接口返回的外层包装对象（例如接口返回结构为{ data: { list: [城市数组] } }，要取到内层的list数组再更新状态）

以上三步操作完成后，报错即可解决。

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