我收到错误消息“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

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

Answer 2

将您的mapDispatchToProps代码块从const mapDispatchToProps = (dispatch) =>{&nbsp; return {&nbsp; &nbsp; &nbsp; searchField:(event) => dispatch(searchChange(event.target.value))&nbsp; }}进入const mapDispatchToProps = (dispatch) =>{&nbsp; return {&nbsp; &nbsp; &nbsp; onSearchChange:(event) => dispatch(searchChange(event.target.value))&nbsp; }}您的实现中的问题是您对 mapStateToProps 和 mapDispatchToProps 使用相同的（prop）名称，在这种情况下，稍后会覆盖第一个。

Answer 3

您的filterRobots函数尝试在searchField仍未定义时运行在像这样运行过滤器之前尝试检查searchField值const filterRobots = this.state.robots.filter(robots =>{&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;//*** add the next line&nbsp; &nbsp; &nbsp; if(!searchField) return undefined&nbsp; &nbsp; &nbsp; &nbsp;//trying to search robot with either upper case or lower case&nbsp; &nbsp; &nbsp; return robots.name.toLowerCase().includes(searchField.toLowerCase())&nbsp; });这确保了这条线return robots.name.toLowerCase().includes(searchField.toLowerCase())仅在searchField有值时运行