使用redux並獲得解析錯誤：意外令牌

Question

我想使用Redux來管理網站的searchField（state）

創建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
})

reducer.js：

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

constant.js：

   export const CHANGE_SEARCH_FIELD = 'CHANGE_SEARCH_FIELD'

app.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.log('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);       

Answer 1

你打錯字了。 在您的渲染方法中，如果（！planets.length）有一個額外的'}'，請刪除它。

 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> ); }