Javascript 基于ReactJS中的数据的Searchfield

我是《反应》的新手。我正在创建一个具有 用户和我需要创建一个搜索栏，如果我 键入两个或三个用户名。但很明显我卡住了。所以 任何帮助都很好。提前谢谢

import React, { Component } from 'react'
 class FilterForm extends Component {   

 state = {
    query: '',
    user: [],
    searchString:[]   
   }

  handleInputChange = (e) => {
    this.setState ({
      query:e.target.value
    } ,()=>{
        this.filterArray();
      })   
    }   

  getData = () => {
    fetch(`http.//localhost:3000/login`)
    .then(response => response.json())
    .then(responseData => {
      //console.log(responseData)
      this.setState ({
        user:responseData,
        searchString: responseData
      })
    })   
   }

   filterArray = () => {
    let searchString = this.state.query;
    let responseData = this.state.user;

  if(searchString.length > 0){
  //console.log(responseData[i].first_name)
   searchString = responseData.filter(searchString);   

 this.setState({ responseData })
  }   
 }   

componentWillMount() {
  this.getData();   
}

   render() {
      return(
        <div className="searchform">
         <form>
          <input 
            type="text"
           id="filter"
            placeholder="Search for user..."
           onChange={this.handleInputChange}/>
          </form>
          <div>{this.state.searchString.map(i => <p>{i.first_name}</p>)} 
           </div>
      </div>
      )   
    } 
   }

export default FilterForm

import React，{Component}来自“React”
类FilterPerform扩展组件{
状态={
查询：“”，
用户：[]，
搜索字符串：[]
}
handleInputChange=（e）=>{
这是我的国家({
查询：e.target.value
} ,()=>{
这个.filterary（）；
})   
}   
getData=（）=>{
fetch（`http://localhost:3000/login`）
.then（response=>response.json（））
.然后（响应数据=>{
//console.log（responseData）
这是我的国家({
用户：responseData，
搜索字符串：responseData
})
})   
}
过滤器阵列=（）=>{
让searchString=this.state.query；
让responseData=this.state.user；
如果（searchString.length>0）{
//console.log（responseData[i].名字）
searchString=responseData.filter（searchString）；
this.setState（{responseData}）
}   
}   
组件willmount（）{
这是getData（）；
}
render（）{
返回(
{this.state.searchString.map（i=>{i.first_name}
）}
)   
} 
}
导出默认过滤器执行

这是我的App.js

import React  from 'react';
import PeopleList from "./components/PeopleList"
import FilterForm from "./components/FilterForm"
//import { search } from "./Utils"
//import UserData from "./components/UserData";
//import SearchBox from "./components/SearchBox"
import './App.css';

class App extends React.Component {

  render() {
    return (
      <React.Fragment>
        <div>
          <FilterForm />
          <PeopleList />
        </div>

      </React.Fragment>
    );
  }
}
export default App

从“React”导入React；
从“/components/PeopleList”导入人员列表
从“/components/FilterForm”导入FilterForm
//从“/Utils”导入{search}
//从“/components/UserData”导入用户数据；
//从“/components/SearchBox”导入SearchBox
导入“/App.css”；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认应用程序

当我开始在搜索栏中输入内容时，我会收到一个错误：

---

我编辑了你的文章并做了一些缩进，对于你的问题，你的问题在Fillterary，这不是你如何使用筛选方法，你正在将状态设置为与搜索无关的user witch

试试这个：

filterArray = () => {
  const { query, user } = this.state;

  if(query.length > 0){
   const searchResult = searchString.filter((el, i) => el[i].first_name.includes(query);

   this.setState({ searchString: searchResult })
  }   
 } 

有关筛选方法的详细信息：

---

请修复代码的格式并包含完整的示例。我看到像this.getData（）这样的方法没有包含在内，看起来您需要稍微清理一下代码<代码>搜索字符串=responseData.filter（搜索字符串）filter回调必须是一个函数，但在您的例子中，您正在向它传递一个字符串值，例如filter如何知道它应该如何处理

searchString

？Tnx以更正我的输入。我不能说我完全理解这一点。理解这段代码中真正发生的事情有点难。这段代码不是我自己写的，我在stackoverflow中的另一个问题上也找到了它的一部分。显然，我必须返回几个步骤，并从更简单的代码开始。谢谢大家的努力。谢谢，我将尝试iTunes。这些代码对我没有帮助，我得到的错误与以前一样。我要删除它，重新开始。。。