开发者问题收集

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

2021-02-09
14547
javascript arrays reactjs

我有一个简单的 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

import React from '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])
Someone Special
2021-02-09

将 

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

更改为 

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

并将用户放入数组中

theabrar
2021-02-09