React Native TypeScript自定义对象搜索过滤后无法赋值数据问题

• 状态泛型定义错误：你需要渲染列表的数据源是userInfo数组，但userInfo、arrayholder两个状态的泛型都声明为单个userInfo对象，和实际存储、赋值的数组类型不匹配
• 属性取值错误：你定义的userData类型中，用户列表字段是userInformation，代码中错误调用了不存在的userData属性
• 赋值类型不匹配：filter方法返回的是userInfo[]数组，但原setUserInfo预期接收单个userInfo对象，触发TS类型校验报错

完整修改后的代码如下：

import { useState, useEffect, FunctionComponent } from 'react';
import { FlatList, TextInput, Text } from 'react-native'; // 按需引入你用到的RN组件

export type userInfo = {
  id: string,
  title: string,
  email: string,
  userAccount: number
};

export type userData = {
  page: number,
  pageSize: number,
  userInformation: userInfo[]
}

// 假设someState是你全局定义的API响应数据，类型为userData
declare const someState: userData;

export const User: FunctionComponent = () => {
  const [search, setSearch] = useState('');
  // 状态改为存储userInfo数组，初始值设为空数组避免空值报错
  const [userInfoList, setUserInfoList] = useState<userInfo[]>([]);
  // arrayholder存储完整的用户列表，作为搜索的原始数据源
  const [arrayholder, setArrayholder] = useState<userInfo[]>([]);

  useEffect(() => {
    // 取userData中的userInformation用户数组赋值
    setUserInfoList(someState.userInformation);
    setArrayholder(someState.userInformation);
  }, [someState]);

  const searchData = (text: string) => {
    const newData = arrayholder.filter(item => {
      const itemData = item.title.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1
    });
    console.log("newData is", newData)
    setUserInfoList(newData)
    setSearch(text)    
  }

  return (
    <>
      {/* 搜索栏示例 */}
      <TextInput
        value={search}
        onChangeText={searchData}
        placeholder="搜索用户"
      />
      {/* FlatList渲染示例，直接传入userInfoList数组作为数据源 */}
      <FlatList
        data={userInfoList}
        keyExtractor={(item) => item.id}
        renderItem={({item}) => (
          <>
            <Text>{item.title}</Text>
            <Text>{item.email}</Text>
          </>
        )}
      />
    </>
  )
}

• 所有存储用户列表的状态泛型统一改为userInfo[]，和FlatList要求的数组数据源类型匹配
• 从响应的userData对象中正确取userInformation字段作为用户列表数据源
• 状态初始值设为空数组，删除不必要的可选链调用，避免运行时空值报错

内容的提问来源于stack exchange，提问作者Anilkumar iOS Developer