Question

我想使用Redux来管理网站的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
})

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

使用redux并获得解析错误：意外令牌

1 个答案: