Javascript 在json对象上搜索（react）

我试图有一个搜索栏，根据查询更新json条目集。下面是显示视频列表的代码（

）。当页面加载时，我想调用

，但在从搜索栏进行此查询之后，应该会更新此列表。由于某种原因，我的搜索功能不起作用

class App extends Component {
  state = {
    query: "",
    data: [],
    filteredData: []
  };

  handleInputChange = event => {
    const query = event.target.value;

    this.setState(prevState => {
      const filteredData = prevState.data.filter(element => {
        return element.title.toLowerCase().includes(query.toLowerCase());
      });

      return {
        query,
        filteredData
      };
    });
  };

  getData = () => {
    fetch('http://localhost:3000/api/videos')
      .then(response => response.json())
      .then(data => {
        const { query } = this.state;
        const filteredData = data.filter(element => {
          return element.title.toLowerCase().includes(query.toLowerCase());
        });
        this.setState({
          data,
          filteredData
        });
      });
  };

componentWillMount() {
    this.getData();
  }

  render() {
    return (
      <div className="searchForm">
        <form>
          <input
            placeholder="Search for..."
            value={this.state.query}
            onChange={this.handleInputChange}
          />
        </form>
        <Videos videos={this.state.data}/>
        <div>{this.state.filteredData.map(i => <p>{i.name}</p>)}</div>
      </div>
    );
  }
}

类应用程序扩展组件{
状态={
查询：“”，
数据：[]，
过滤器数据：[]
};
handleInputChange=事件=>{
const query=event.target.value；
this.setState（prevState=>{
常量filteredData=prevState.data.filter（元素=>{
return元素.title.toLowerCase（）.includes（query.toLowerCase（））；
});
返回{
查询
过滤数据
};
});
};
getData=（）=>{
取（'http://localhost:3000/api/videos')
.then（response=>response.json（））
。然后（数据=>{
const{query}=this.state；
常量filteredData=data.filter（元素=>{
return元素.title.toLowerCase（）.includes（query.toLowerCase（））；
});
这是我的国家({
数据，
过滤数据
});
});
};
组件willmount（）{
这是getData（）；
}
render（）{
返回(
{this.state.filteredData.map（i=>{i.name}
）}
);
}
}

---

我是新手，任何提示都会受到欢迎。

您正在使用从服务器获得的

视频
组件中的
this.state.data
。您应该使用
this.state.filteredData
来显示依赖于
查询的条目：

<Videos videos={this.state.filteredData}/>

您正在创建一个没有data属性的新对象，并在调用this.setState时将该对象设置为状态。因此，数据属性将被删除

在handleInputChange方法上，执行以下操作：

 return {
       ...this.state,
        query,
        filteredData
 };

 this.setState({
          ...this.state,
          data,
          filteredData
 });


在getData方法上执行以下操作：

 return {
       ...this.state,
        query,
        filteredData
 };

 this.setState({
          ...this.state,
          data,
          filteredData
 });


您需要将
handleInputChange
绑定到
this
。
查看更多信息。
他不会改变状态。他为状态创建了一个新对象，但没有
…this.state
你说得对。我更新了答案。谢谢@RukkiesMan。谢谢。你的建议和EVeras一起起了作用。我只能将一个答案标记为已解决。