未捕获的类型错误：无法读取未定义 React 的属性“过滤器”

IT技术 javascript arrays reactjs
2022-07-09 02:13:40

我有一个简单的react应用程序，我用它来显示用户列表。我有一个搜索框，它过滤用户列表并返回搜索到的用户，

但是，当我使用搜索框搜索用户时，我得到一个TypeError: Cannot read property 'filter' of undefined

该页面最初显示正常，只是当我搜索引发错误的用户时。我知道用户正在正确生成，因为我控制台登录filteredUsers了用户都正确输出。

这是我的 App.js

import { useState } from 'react';
import React from 'react';
import CardList from './components/CardList';
import SearchBox from './components/SearchBox';
import { users } from './users';
import 'tachyons';

const App = () => {
  const [state, setState] = useState({
    users,
    searchField: '',
  });

  const filteredUsers = state.users.filter((user) => {
    return user.name.toLowerCase().includes(state.searchField.toLowerCase());
  });

  const onSearchChange = (e) => {
    setState({ searchField: e.target.value });
  };

  return (
    <div className='App tc'>
      <h1>RoboFriends</h1>
      <SearchBox searchChange={onSearchChange} />
      <CardList robots={filteredUsers} />
    </div>
  );
};

export default App;

这是我的 SearchBox.js

从“react”导入react；

const SearchBox = ({ searchField, searchChange }) => {
  return (
    <div className='pa2'>
      <input
        className='pa3 ba b--green bg-lightest-blue'
        type='search'
        placeholder='Search Users'
        onChange={searchChange}
      />
    </div>
  );
};

export default SearchBox;
2个回答

因为您在这里使用 state.users，所以过滤器期望它是一个数组。

  const filteredUsers = state.users.filter((user) => {
    return user.name.toLowerCase().includes(state.searchField.toLowerCase());
  });

所以你需要将初始状态设置为一个数组

 const [state, setState] = useState({
    users: [], //or a initial value of array of users.
    searchField: '',
  });

您还需要在更新状态时保留用户。

  const onSearchChange = (e) => {
    setState( prev => ({ ...prev, searchField: e.target.value }));
  };

  //OR 

  const onSearchChange = (e) => {
    setState({ ...state, searchField: e.target.value });
  };

然而，这条线并不好，因为它在每次渲染时都会被调用，你应该像这样使用 useMemo 来“升级”它。

 const filteredUsers = useMemo(() => state.users.filter((user) => {
    return user.name.toLowerCase().includes(state.searchField.toLowerCase());
  }), [state])

改变

  const onSearchChange = (e) => {
    setState({ searchField: e.target.value });
  };

至

const onSearchChange = (e) => {
        setState({ searchField: e.target.name.value });
      };

并使用户成数组

其它你可能感兴趣的问题
上一篇使用 React Hooks 获得“太多重新渲染”错误 下一篇Ant Design Input / React DND - 使用 react-dnd 时无法在 Ant Design Input 内移动文本指针