props.dogs.map не является функцией

Question

У меня есть строка поиска и карточка с именем собаки. Я хочу использовать панель поиска, чтобы отфильтровать имя собаки. Прямо сейчас я получаю сообщение об ошибке props.dogs.map не является функцией.

В компоненте DogCard я изменил props.dogs на props.filteredName, но все еще получаю сообщение об ошибке. Я также посмотрел на ReactJS с ES6: this.props не является функцией, когда я связываю два компонента , потому что это было похоже на мою ошибку. Я пробовал handleFilterName = {this.handleFilterName.bind (this)} и handleFilterName = {e => this.handleFilterName (e)}, но все равно получаю ту же ошибку.

class SelectDogs extends Component {
 state = {
     dogs: 
        [ {
             name: 'Jack',
             breed: 'beagle',
             age:'2',
         }
     ],
     filteredName: ''
 }



 handleFilterName = (e) => {

     const dogs = this.state.dogs
     const filteredDogName = dogs.filter( dog => {
     return (
         dog.name.search(e.currentTarget.value) !== -1
       );

     })
     this.setState({filteredName: filteredDogName})  
 }


 render() {
     return (
         <div>
             <NavHeader/>
             <SearchDog handleFilterName={this.handleFilterName}/>
             <DogCard  dogs={this.state.filteredName}></DogCard>
         </div>
     )
 }
}
export default SelectDogs 



const SearchDog = (props) => {

 return (

   <div className="search-container">
      <Form  inline onChange={props.handleFilterName}>
         <FormControl type="text" placeholder="Search a Dog" className=" mr-sm-2" />
         <Button type="submit"><FaSistrix/></Button>
      </Form>
   </div>


 )


}

export default SearchDog

const DogCard = (props) => {


return props.dogs.map( dog => 
     {
         return <div className="dog-container"><Card className="dog-card" key={dog.name}><Link to='/dog'>{dog.name}</Link></Card></div>

     })



}

export default DogCard

Answer 1

Как я вижу, в вашем начальном определении состояния filteredName - это строка, и вы вызываете карту метода Array для нее.

Изменить начало на

class SelectDogs extends Component {
 state = {
     dogs: 
        [ {
             name: 'Jack',
             breed: 'beagle',
             age:'2',
         }
     ],
     filteredName: []
 }
...

и все должно быть в порядке.

Я предполагаю, что проблема в неправильном имени свойства, если вы переименуете его в filteredDogs, проблема будет видна с первого взгляда.