reactjs - 切片函数应用于未定义

Question

我正在开发一个反应应用程序，当我在输入字段中键入一些文本时，该字段应与城市列表匹配。我创建了一个动作并接受两个输入（列表和城市），我应用list.slice()并检查了值。当我在输入字段中输入另一个字符时，它显示error切片已应用于undefined.

//app.js
inputHandler = event => {
  event.preventDefault();
  let val = event.target.value;
  this.props.onCitySearch(this.props.cityList, val);
};
const mapStateToProps = state => {
  return {
    cityList: state.cities.citylist,
    citiesSearched: state.cities.citySearched
  };
};
const mapDispatchToProps = dispatch => {
  return {
    onFetch: () => dispatch(actions.fetchCities()),
    onCitySearch: (list, city) => dispatch(actions.citySearched(list, city))
  };
};
//actions.js
export const fetchCities = () => dispatch => {
  fetch("http://localhost:8000/cities")
    .then(res => res.json())
    .then(data => {
      return dispatch({
        type: "FETCHCITIES",
        cities: data
      });
    });
};

export const citySearched = (list, city) => dispatch => {
  console.log(list);
  const cities = list.filter(c => {
    return c.name.toLowerCase().includes(city.toLowerCase());
  });
  localStorage.setItem("cities", JSON.stringify(cities));
  return dispatch({
    type: "CITIESSEARCHED",
    city: cities
  });
};
//citiesReducer
const initialState = {
  citylist: [],
  citySearched: []
};

const citiesReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCHCITIES":
      return {
        ...state,
        citylist: action.cities
      };
    case "CITIESSEARCHED":
      return {
        citySearched: action.city
      };
    default:
      return {
        ...state
      };
  }
};
export default citiesReducer;

标签： reactjs

Answer 1

使用.filter instedof .slice

const citySearched= (list, city)=> (dispatch)=>{
  const cities = list.filter((xyz) => {
      return xyz.toLowerCase().includes(city.toLowerCase());
  });
  localStorage.setItem("cities",JSON.stringify(cities));
  return dispatch({
      type: 'CITIESSEARCHED', city: cities
  });
};