React对象过滤异常：searchfield状态无法在filterRobots中生效

嘿，我一眼就揪出问题所在了——低级拼写错误！仔细瞅你的代码就能发现：

在OnSearchChange方法里，你更新状态时写的是：

this.setState({seachfield : event.target.value})

这里的键名是seachfield（少了个字母r），但你初始定义的state键名是searchfield，而且过滤函数里用的也是this.state.searchfield。这就导致你实际更新的是一个不存在的状态字段，真正需要的searchfield状态根本没被修改，过滤逻辑自然拿不到正确的输入值！

修正后的完整代码 #

//imports
import React , {Component}from 'react';
import {robots} from './robots';
import CardList from './CardList';
import Searchbox from './Searchbox';

//main app
class App extends Component{
 constructor(){
 super()
 this.state={
 robots : robots,
 searchfield : ""
 }
 }

 //the on change event, update searchfield.
 OnSearchChange =(event) =>{
 // 修正拼写：seachfield → searchfield
 this.setState({searchfield : event.target.value})
 }

 render(){
 // 同步修正打印的字段名，保持统一
 console.log(this.state.searchfield, 'searchfield');

 //filter by name
 const filteredRobots = this.state.robots.filter(robot =>{
 // 额外优化：把搜索值也转小写，避免大小写不匹配的问题
 return robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase())
 })
 console.log(filteredRobots);

 return(
 <div className="tc">
 <h1> Robots Title </h1>
 <Searchbox searchchange={this.OnSearchChange}/>
 <CardList robots={filteredRobots}/>
 </div>
 );
 }
}

export default App;

额外提醒 #

我还加了个小优化：把this.state.searchfield也转成小写，这样用户输入大写字母时也能匹配到机器人名称，过滤逻辑会更健壮。

另外别忘了检查你的Searchbox组件是否正确绑定了onChange事件，比如：

// Searchbox组件示例
const Searchbox = ({ searchchange }) => {
  return (
    <input
      type="search"
      onChange={searchchange}
      placeholder="Search robots..."
    />
  )
}

这样修改后，你的过滤功能应该就能正常工作啦！

内容的提问来源于stack exchange，提问作者Madmax