javascript - react-redux 搜索过滤器的问题
问题描述
这是我的第一个 react-redux 项目(课程列表),我在使用 redux 时遇到了一些麻烦。我需要按课程名称进行搜索,我的代码基于这个答案,我可以在 redux-devtool 中看到操作,但在 ui 上看不到。请帮助我理解我做错了什么
//action
export function search (value) {
return {type: SEARCH, value};
}
//reducer
import { COURSES } from '../../constants';
const initialState = COURSES;
export default function reducer(state = initialState, action) {
switch(action.type) {
case SEARCH: {
const {value} = action;
const course = state.filter((val) => val.includes(value));
return {...state, value, course};
}
default:
return state;
}
}
//search component
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {deleteCourse, search} from '../../redux/actions';
class SearchInput extends Component {
render() {
const {search, value} = this.props;
return (
<div className={classes.SearchInput}>
<input
placeholder='Search'
onChange={(e) => search(e.target.value)}
value={value}
/>
</div>
)
}
}
export default connect (state => ({
courses: state.courses,
}), {search})(SearchInput);
//Courses Component
import Form from '../Form/Form';
import { deleteCourse, search } from '../../redux/actions';
const Courses = ({ courses, deleteCourse }) => {
console.log(courses)
return (
<div className={classes.Courses}>
<SearchInput />
<Button title='Add course' />
<CourseList
courses={courses}
deleteCourse={deleteCourse}
search={search}
/>
<Form />
</div>
)
}
export default connect (state => ({
courses: state.courses,
}), {deleteCourse})(Courses);
解决方案
有几件事可能导致它
export function search (value) {
return {type: SEARCH, value};
}
除非您没有在上面添加整个操作代码(根据开发工具照片判断可能是这种情况),否则您将未定义的变量作为类型传递
import { COURSES } from '../../constants';
const initialState = COURSES;
export default function reducer(state = initialState, action) {
switch(action.type) {
case SEARCH: {
const {value} = action;
const course = state.filter((val) => val.includes(value));
return {...state, value, course};
}
default:
return state;
}
}
在您的 reducer 中,您的初始状态看起来像是一个数组(因为您可以直接过滤它),但随后您将该数组作为返回对象的属性进行迭代。
const initialState = {courses: [], value: '', matches: []}
const matches = state.courses.filter((val) => val.includes(value));
return {...state, matches: matches};
您的初始状态结构不应在返回时进行重组;相反,它应该看起来像上面那样,匹配从 state.courses 过滤。在状态中存储搜索值似乎也没有任何用处,因此可以将其删除。
总的来说,我认为没有必要通过 redux 进行搜索,因为父组件可以管理自己的渲染。你只需要创建一个 state 属性来过滤 redux connect 传入的课程。
请参阅工作示例:
推荐阅读
- django - Django 为什么我应用迁移时会创建一个字段?
- java - 如何使用 hasNext() 验证用户输入;尽管?
- sublimetext3 - 在崇高的文本中搜索确切的问题不起作用
- wpf - 在鼠标指针附近凸出的边框
- python - 我想计算 n 天内的利润损失百分比。但是得到这个 KeyError : 0。如何解决这个问题?
- c# - 仅在 Visual Studio/C# 上无法连接到任何指定的 MySQL 主机
- linux - WebDriverException:/usr/bin/google-chrome-stable 中没有 chrome 二进制文件或找不到 chrome 二进制文件
- flutter - Flutter:NoSuchMethodError(NoSuchMethodError:方法'[]'在null上被调用
- r - 问题:qqplot图例线型不同
- java - 按字符串长度降序对字符串列表进行排序,不会更改列表