Я получаю сообщение об ошибке "TypeError: searchField.toLowerCase не является функцией" - PullRequest
Новая
       39

Я получаю сообщение об ошибке "TypeError: searchField.toLowerCase не является функцией"

1 голос
/ 06 августа 2020

** Я получаю сообщение об ошибке «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);

Ответы [ 3 ]

1 голос
/ 06 августа 2020

Похоже, ваша функция mapDispatchToProps переопределяет свойство searchField, которое определено в mapStateToProps. Так что опора searchField на самом деле является функцией, а не строкой.

0 голосов
/ 06 августа 2020

Измените кодовый блок mapDispatchToProps с 

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

на 

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

Проблема в вашей реализации заключается в том, что вы используете то же имя (prop) для и mapStateToProps, и mapDispatchToProps, и в этом случае позже перезаписывает первый.

0 голосов
/ 06 августа 2020

Ваша функция 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 имеет значение

...