我收到错误消息“TypeError：searchField.toLowerCase 不是函数”

Question

** 尝试运行此代码时出现错误“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);

Answer 1

看来您的 mapDispatchToProps函数正在searchField覆盖mapStateToProps. 所以searchFieldprop 实际上是一个函数而不是一个字符串。

Answer 2

将您的mapDispatchToProps代码块从

const mapDispatchToProps = (dispatch) =>{

  return {

      searchField:(event) => dispatch(searchChange(event.target.value))

  }

}

进入

const mapDispatchToProps = (dispatch) =>{

  return {

      onSearchChange:(event) => dispatch(searchChange(event.target.value))

  }

}

您的实现中的问题是您对 mapStateToProps 和 mapDispatchToProps 使用相同的（prop）名称，在这种情况下，稍后会覆盖第一个。

Answer 3

您的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有值时运行