Javascript 根据子组件的输入筛选数据

我有一个用户列表，我想在用户在文本字段中键入字母的过程中过滤这些用户

在包含输入字段的子组件中，我通过道具向上传递输入：

 onEnter(event){
    console.log("ENTER")
   // console.log(event.target.value)
    this.props.filterEmployee(event.target.value);
}

在我的容器组件中，我接受值

filterEmployee(val){
    console.log(val)
   // const allUser = this.props.allUser.allUserData;

   allUser .forEach(function(user){
       if(user.userNameLast.indexOf(val) != -1){
           console.log(user) //works
       }
    });
}

allUser

是从myRedux store连接到容器组件的数据数组

此数据还用于显示在

组件willmount

上初始化的用户列表

 render() {
    console.log("administration")
    console.log(this.props)

    const allUser = this.props.allUser.allUserData;


    return (
        <div id="employeeAdministration">
            <h1>Mitarbeiter Verwaltung</h1>
            <EmployeeAdministrationFilterList
                filterEmployee={this.filterEmployee.bind(this)}
            />
            {/* suchfeld - Name, Department mit checkbox*/}
            <ul>
                {allUser.length != 0 ? allUser.map(function (item, i) {
                    console.log(item)
                    return <li key={i}>
                        <UserCard
                            userData={item}
                            displayPersonalInfo={true}
                            showRequestDates={false}
                            showChangePassword={false}
                        />
                    </li>
                })
                    : ""
                }
            </ul>
        </div>
      )
    }
  }

和减速器（不工作）

下面是存储如何连接到组件的代码

 EmployeeAdministration.PropTypes = {
   allUserData: PropTypes.array
  };

  const mapStateToProp = state => ({
     allUser: state.allUser
   });

   export default connect(mapStateToProp)(EmployeeAdministration)

---

尝试此操作时，结果是

此示例应能够演示基本工作流：

基本上，

Redux

有一个

单向数据流

。数据（这里是

存储

中的

用户

）从根组件流向子组件

每当您想在任何组件中更改

用户

的值时，您都会创建一个

操作

并

将该操作分派给相应的
减速机
。
reducer
更新
存储
并从上到下传递它

例如，您希望筛选名称中包含“Jo”的所有用户：

动作创造者
将
动作创建者
传递到组件中。
操作
是一个普通对象，其格式类似于
{type:“FILTER\u ALL\u USERS”，query:“Jo”}
。这里是第73行：

<Users users={this.props.users} actions={this.props.actions}></Users>

减速器来处理动作
所有减速器都将被告知此操作，但特定减速器将处理此操作（基于其
类型），第20行：

case 'FILTER_ALL_USERS': 
  return allUsers.filter(user => user.name.toLowerCase().indexOf(action.query.toLowerCase()) >= 0)

重新渲染
reducer将返回一个全新的对象作为新的
存储
，该对象将从组件的根目录通过
Redux
传递。将调用子组件中的所有
渲染
函数。
此示例应能够演示基本工作流：

基本上，
Redux
有一个
单向数据流
。数据（这里是
存储
中的
用户
）从根组件流向子组件

每当您想在任何组件中更改
用户
的值时，您都会创建一个
操作
并
将该操作分派给相应的
减速机
。
reducer
更新
存储
并从上到下传递它

例如，您希望筛选名称中包含“Jo”的所有用户：

动作创造者
将
动作创建者
传递到组件中。
操作
是一个普通对象，其格式类似于
{type:“FILTER\u ALL\u USERS”，query:“Jo”}
。这里是第73行：

<Users users={this.props.users} actions={this.props.actions}></Users>

减速器来处理动作
所有减速器都将被告知此操作，但特定减速器将处理此操作（基于其
类型），第20行：

case 'FILTER_ALL_USERS': 
  return allUsers.filter(user => user.name.toLowerCase().indexOf(action.query.toLowerCase()) >= 0)

重新渲染
reducer将返回一个全新的对象作为新的
存储
，该对象将从组件的根目录通过
Redux
传递。子组件中的所有
render
函数都将被调用。
我已经更新了我的Q，并通过reducer添加了我的try to do。但我对这种语法还不太熟悉，无法让它工作。你有什么想法吗？我给你举了个例子。大约200行代码。但似乎不可避免，因为
Redux
在设计上有点复杂。我已经更新了我的Q，并添加了我通过reducer来实现的尝试。但我对这种语法还不太熟悉，无法让它工作。你有什么想法吗？我给你举了个例子。大约200行代码。但似乎不可避免，因为
Redux
的设计有点复杂。
case 'FILTER_ALL_USERS': 
  return allUsers.filter(user => user.name.toLowerCase().indexOf(action.query.toLowerCase()) >= 0)