javascript - 未捕获的类型错误 : Cannot read property 'filter' of undefined React

Question

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

Answer 1

因为您在这里使用 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])