未处理的拒绝(错误):给定的操作返回undefined React JS

时间:2018-05-31 23:33:04

标签: javascript reactjs redux

我不确定为什么会收到错误。未处理的拒绝(错误):给定操作“SET_CARS”,减速器“cars”返回undefined。要忽略某个操作,您必须显式返回先前的状态。如果您希望此reducer不保留任何值,则可以返回null而不是undefined。

REDUCERS

  import { SET_CARS} from "../actions";
  import { combineReducer } from "redux";

  function cars(state = [], action) {
  switch (action.type) {
  case SET_CARS:
  return 
  action.items;
  default:
  return state; }
  }

 const rootReducer = combineReducers({
 cars
 });

 export default rootReducer;

操作

 export const SET_CARS = 'SET_CARS';

 export function setCars(items){
  return {
    type: SET_CARS , 
    items
}
}

SearchCars

class SearchCars extends Component {
 constructor() {
  super();


   this.state = {
  tansmition: ""
  };
  }

search() {
let { tansmition } = this.state;
const url = `http://localhost:4000/vehicles/? 
transmission=${tansmition}`;


fetch(url, {
  method: 'GET'
})
.then(response => response.json())
.then(json => {
    this.props.setCars(json.results)
  })
}

enter image description here

2 个答案:

答案 0 :(得分:1)

你的fetch在胖箭头函数中缺少return,因此获取的内容不会返回任何内容。

更改此行:

.then(json => {
    this.props.setCars(json.results)
})

对此:

.then(json => {
    return this.props.setCars(json.results)
})

答案 1 :(得分:1)

ASI strikes again.

return 
action.items;

这被解释为:

return;
action.items;

将它们放在一条线上它应该可以工作。我还考虑使用像prettier这样的格式化程序。它会帮助自己和其他人查看您的代码,以便更轻松地查看此类错误。