javascript - 未捕获的类型错误:无法读取未定义 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
从“反应”导入反应;
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;
解决方案
因为您在这里使用 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])
推荐阅读
- delphi - 在Delphi中更改具有不同名称的多个面板的颜色的过程
- javascript - 不和谐聊天框输入字段的类名是什么?
- c# - CopyPagesTo 复制字段字典错误(带有修复建议)或仅是错误 PDF 输入文件的结果?
- java - 来自其他包的 Api 出现错误“必须在调用 save() 之前手动分配此类的 ID”
- r - 按两组计算不同的值并总结错误
- salesforce - 根据 Salesforce 的自定义对象中的其他选项列表值/数值填充一个选项列表值
- reactjs - 如何使特定按钮在 React.js 上永久消失?
- go - 为什么取消引用的指针被传递给指针类型?
- vba - 为什么我在 VBA 上得到下标超出范围错误?
- php - 为什么我需要显式加载我的关系