Javascript I'；“我得到一个错误”；TypeError:searchField.toLowerCase不是函数；

**我在尝试运行此代码时遇到一个错误“TypeError:searchField.toLowerCase不是函数”，而代码正在成功编译**

import React, { Component } from 'react';
import CardList from '../Components/CardList';
import SearchBox from '../Components/SearchBox';
//import { robots } from './robot';
import './App.css';
import Scroll from '../Components/Scroll';
import ErrorBoundry from '../Components/ErrorBoundry';
import { connect } from 'react-redux';
import { searchChange } from '../actions'     
 
 
 
 const mapStateToProps = state => {
    return {searchField:state.searchField}
 }
 
 const mapDispatchToProps = (dispatch) =>{
    return {
        searchField:(event) => dispatch(searchChange(event.target.value))
    }
 }
 
 class App extends Component {
    constructor(){
        super()
        this.state = {
            robots:[]
        }   
    }
    
 
 
    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/users').then(respond =>{
            return respond.json()
        }).then(users =>{
 
            this.setState({robots:users})
        })
    }
    
    render(){
        const { searchField, onSearchChange } = this.props;
        const filterRobots = this.state.robots.filter(robots =>{
            //trying to search robot with either upper case or lower case
            return robots.name.toLowerCase().includes(searchField.toLowerCase())
        });
 
        return(
            <div className="tc">
            <h1 className="head"> Robo Friend App</h1>
            <div>
            <SearchBox searchChange={onSearchChange}/>
            </div>
 
            <Scroll>
            <ErrorBoundry>
            <CardList robots={filterRobots} />
            </ErrorBoundry>
            </Scroll>
            </div>
            )
    }
    
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

import React，{Component}来自'React'；
从“../Components/CardList”导入卡片列表；
从“../Components/SearchBox”导入SearchBox；
//从“./robot”导入{robots}；
导入“/App.css”；
从“../Components/Scroll”导入滚动；
从“../Components/ErrorBoundry”导入ErrorBoundry；
从'react redux'导入{connect}；
从“../actions”导入{searchChange}
常量mapStateToProps=状态=>{
返回{searchField:state.searchField}
}
const mapDispatchToProps=（调度）=>{
返回{
searchField：（事件）=>dispatch（searchChange（event.target.value））
}
}
类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
机器人：[]
}   
}
componentDidMount（）{
取（'https://jsonplaceholder.typicode.com/users）。然后（回复=>{
return respond.json（）
})。然后（用户=>{
this.setState（{robots:users}）
})
}
render（）{
const{searchField，onSearchChange}=this.props；
const filterRobots=this.state.robots.filter（robots=>{
//尝试用大写或小写搜索robot
return robots.name.toLowerCase（）.includes（searchField.toLowerCase（））
});
返回(
机器人好友应用
)
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

您的

filterRobots

函数试图在

searchField

尚未定义时运行

在像这样运行筛选器之前，请尝试检查

searchField

值

const filterRobots = this.state.robots.filter(robots =>{
      
       //*** add the next line
      if(!searchField) return undefined
       //trying to search robot with either upper case or lower case
      return robots.name.toLowerCase().includes(searchField.toLowerCase())
  });

这确保了这条线

return robots.name.toLowerCase().includes(searchField.toLowerCase())

---

仅当

searchField

有值时运行

filterRobots

函数，而

searchField

仍未定义

在像这样运行筛选器之前，请尝试检查

searchField

值

const filterRobots = this.state.robots.filter(robots =>{
      
       //*** add the next line
      if(!searchField) return undefined
       //trying to search robot with either upper case or lower case
      return robots.name.toLowerCase().includes(searchField.toLowerCase())
  });

这确保了这条线

return robots.name.toLowerCase().includes(searchField.toLowerCase())

---

仅当

searchField

具有值时运行从

const mapDispatchToProps = (dispatch) =>{
  return {
      searchField:(event) => dispatch(searchChange(event.target.value))
  }
}

进入

---

实现中的问题是，您对mapStateToProps和mapDispatchToProps使用了相同的（prop）名称，在本例中，稍后将覆盖第一个名称。

从

const mapDispatchToProps = (dispatch) =>{
  return {
      searchField:(event) => dispatch(searchChange(event.target.value))
  }
}

进入

---

实现中的问题是，您对MapStateTrops和mapDispatchToProps使用了相同的（prop）名称，在本例中，随后会覆盖第一个名称。

您的

mapDispatchToProps

函数似乎正在覆盖

MapStateTrops

中定义的

搜索字段
prop。因此，
searchField
prop实际上是一个函数而不是字符串。
您的
mapDispatchToProps
函数似乎覆盖了
MapStateTrops
中定义的
searchField
prop。因此，
searchField
prop实际上是一个函数，而不是字符串。
toLowerCase（）适用于字符串。看起来您正在尝试对searchField执行toLowerCase（），它的类型不是字符串。
searchField
肯定是字符串吗？你能把它记录到控制台并告诉我们吗<代码>控制台日志（搜索字段）检查我的答案以获得修复！toLowerCase（）适用于字符串。看起来您正在尝试对searchField执行toLowerCase（），它的类型不是字符串。
searchField
肯定是字符串吗？你能把它记录到控制台并告诉我们吗<代码>控制台日志（搜索字段）检查我的答案以获得修复！您不需要返回
未定义的
，只需返回
即可。按照逻辑，它将默认为未定义。@GROVER。对于一个新用户来说，您是正确的。看到一个空白的return可能会让人困惑。您不需要返回
未定义的
，您只需返回
即可。按照逻辑，它将默认为未定义。@GROVER。对于一个新用户来说，你是对的。看到一个空白的返回可能会让人困惑