Использование избыточности и ошибка синтаксического анализа: неожиданный токен

Я хочу использовать редукцию для управления searchField (состоянием) веб-сайта.

После того, как я создал функцию action.js,reducer.js,constant.js и redux.connect(),

Я получил сообщение об ошибке: Ошибка синтаксического анализа: Неожиданный токен

  62 |         return <div className='tc'><h1>Loading</h1></div>;
  63 |     }
> 64 |      const filteredPlanets = planets.filter(planet=>{
 |            ^
  65 |          return planet.name.toLowerCase().includes(
  66 |              searchField.toLowerCase())
  67 |              ||

Что не так с моим app.js? Моя орфография неверна? Может ли кто-нибудь помочь мне решить эту проблему? Вот мой action.js:

import {CHANGE_SEACRCH_FIELD} from './constant.js'

export const setSearchField=(text)=>({
    type：'CHANGE_SEACRCH_FIELD',
    payload:text
})

редуктор.js:

 export const searchPlanets=(state=intialState,action = {})=>{
   switch(action.type){
    case CHANGE_SEARCH_FIELD:
       return Object.assign({},state,{searchField:action.payload})
    default:
       return state;
   }
}

константа.js:

   export const CHANGE_SEARCH_FIELD = 'CHANGE_SEARCH_FIELD'

приложение.js:

  import React,{Component} from 'react';
  import CardList from '../Components/CardList';
  import { connect } from 'react-redux';
  import SearchBox from '../Components/SearchBox';
  import Scroll from '../Components/Scroll';
  import './App.css';
  import {setSearchField} from'../action'

  const mapStateToProps=state=>{
      return{
          searchField:state.searchField
      }
  }

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

  class App extends Component{
     constructor(){
      super()
       this.state = {
        planets:[]
    }
}
 componentDidMount() {
    const urls = [
        'https://swapi.co/api/planets/',
        'https://swapi.co/api/planets/?page=2', 
        'https://swapi.co/api/planets/?page=3',
        'https://swapi.co/api/planets/?page=4',
        'https://swapi.co/api/planets/?page=5',
        'https://swapi.co/api/planets/?page=6',
        'https://swapi.co/api/planets/?page=7'
    ]

    Promise.all(urls.map(async url => {
        const response = await fetch(url);
        const morePlanets = await response.json();
        var combinedArrayOfPlanets = this.state.planets;
        combinedArrayOfPlanets.push(morePlanets.results);

        var sortedArrayOfPlanets = combinedArrayOfPlanets
            .flat()
            .sort((a, b) => a.name.localeCompare(b.name));

        this.setState({planets: sortedArrayOfPlanets})
    }))
    .catch(error => 
        console.info('Error during fetching of planets:', error)
    );
}


render(){
    const {planets} = this.state;
    const { searchField, onSearchChange }=this.props;
     if (!planets.length) {
    }
    return <div className='tc'><h1>Loading</h1></div>;
}
    const filteredPlanets = planets.filter(planet=>{
        return planet.name.toLowerCase().includes(
                searchField.toLowerCase())
            ||
            planet.diameter.toLowerCase().includes(
                searchField.toLowerCase())
            ||
            planet.rotation_period.toLowerCase().includes(
                searchField.toLowerCase())
    })
    return (
    <div className='tc'>
        <h1 className='f2'>StarWarPlanet</h1>
        <SearchBox searchChange = {onSearchChange}/>
        <Scroll>
            <CardList planets = {filteredPlanets}/>
        </Scroll>
    </div>
    );
   }
 }

 export default connect(mapStateToProps,mapDispatchToProps)(App);