React中获取Supabase用户数据并按displayname过滤的问题

你的问题主要出在两个地方：把数组转成字符串存在state里，导致无法调用数组的filter方法；另外过滤时没正确提取displayname字段。下面是具体的修正方案：

1. 修正State初始化与数据存储 #

• 初始化users时设为空数组，避免后续filter调用报错；query初始设为空字符串更合理。
• 拿到接口返回的data后直接存入state，不要用JSON.stringify转换——你原本想转小写是针对displayname字段，不是整个数组。

修改后的代码：

const [users, setUsers] = useState([]);
const [query, setQuery] = useState('');

useEffect(() => {
  const getUsers = async () => {
    const { data, error } = await supabase.from("users").select();
    if (error) {
      console.log(error.message);
    }
    if (data) {
      setUsers(data); // 直接存对象数组，无需转字符串
    }
  };
  getUsers();
}, []);

2. 修正过滤函数 #

过滤时要针对每个user对象的displayname字段做大小写转换和匹配，同时处理query为空的情况（避免toLowerCase调用报错）：

const filteredItems = users.filter((user) => {
  // 处理displayname可能为空的情况，同时统一转小写
  const userName = user.displayname?.toLowerCase() || '';
  const searchQuery = query.toLowerCase() || '';
  return userName.includes(searchQuery);
});

关键说明 #

• 直接存数组到state后，users保持对象数组类型，能正常调用filter等数组方法。
• 提取user.displayname做匹配，精准针对用户名过滤，而非整个对象。
• 用可选链?.和默认值处理字段缺失的情况，避免运行时报错。

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