Как решить проблему с разбором ошибки внутри редуктора? - PullRequest
Новая
       2

Как решить проблему с разбором ошибки внутри редуктора?

0 голосов
/ 06 октября 2018

Я пытаюсь перенастроить приложение-клон PixaBay на Redux.Приложение устанавливает для состояния searchText значение ввода, затем запускает обратный вызов GET-запроса Axios по мере того, как пользователь вводит текст для поиска, после чего изображения извлекаются.

Я получил ошибку синтаксического анализа на моем редукторе, но я не понимаю ошибку, так как считаю, что код правильный.Может ли кто-нибудь любезно помочь мне решить проблему?Спасибо!

КОНТЕЙНЕР 

import React, { Component } from 'react';
import { fetchPhotos } from '../actions/actions';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import TextField from 'material-ui/TextField';
import ImageResults from '../imageResults/ImageResults';

class Search extends Component {

  FetchPhotosHandler = (e) => {
    this.props.fetchPhotos(e);
  }

  render() {
    console.log(this.props.images);
    return (
      <div>
        <TextField 
        name="searchText"
        value={this.props.searchText}
        onChange={this.FetchPhotosHandler}
        floatingLabelText="Search for photos"
        fullWidth={true} />
        <br />
        {this.props.images.length > 0 ? (<ImageResults images={this.props.images} />) : null}  
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchPhotos, dispatch});
}

export default connect(null, mapDispatchToProps)(Search);

АКЦИЯ 

import axios from 'axios';
export const FETCH_PHOTOS = 'FETCH_PHOTOS';

const ROOT_URL = 'https://pixabay.com/api';
const API_KEY = 'my_api_key';
const searchText = '';

export function fetchPhotos(e) {
  const url = `${ROOT_URL}/?key=${API_KEY}&q=${searchText}&image_type=photo`;
  const request = this.setState({searchText: e.target.value}, () => {
    axios.get(url)
    .then(response => {
      this.setState({images: response.data.hits});
    })
    .catch(error => {
      console.log(error)
    });
  });

  return {
    type: FETCH_PHOTOS,
    payload: request 
  };
}

РЕДУКТОР 

import { FETCH_PHOTOS } from '../actions/actions';

 const initialState = {
   searchText: '',
   images: []
 }

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case FETCH_PHOTOS:
      return {
        ...state,
        action.data.hits
      };
    default: 
      return state;
  }
}

export default reducer;

ОШИБКА 

./src/reducers/reducer.js
  Line 16:  Parsing error: Unexpected token, expected ","

  14 |       return {
  15 |         ...state,
> 16 |         action.data.hits
     |               ^
  17 |       };
  18 |     default: 
  19 |       return state;

1 Ответ

0 голосов
/ 06 октября 2018

Вы возвращаете объект, поэтому вам необходимо назначить ключ для ответа API. 

  return {
    ...state,
    images: action.data.hits,
  };
...