Reactjs 应用于未定义对象的切片函数
我正在开发一个react应用程序,当我在输入字段中键入一些文本时,该字段应该与城市列表匹配。 我创建了一个操作并进行了两个输入(list和city),应用了Reactjs 应用于未定义对象的切片函数,reactjs,Reactjs,我正在开发一个react应用程序,当我在输入字段中键入一些文本时,该字段应该与城市列表匹配。 我创建了一个操作并进行了两个输入(list和city),应用了list.slice()并检查了值。当我在输入字段中输入另一个字符时,其显示错误,该片段应用于未定义 //app.js inputHandler = event => { event.preventDefault(); let val = event.target.value; this.props.onCitySearch
list.slice()
并检查了值。当我在输入字段中输入另一个字符时,其显示错误
,该片段应用于未定义
//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;
使用.filter代替.slice
您在
console.log(列表)中得到了什么值代码>当您键入第二种类型的whats列表时,基本上是在控制台上打印的。日志(列表)您可以尝试复制问题并在堆栈片段或代码沙盒中共享链接吗回答这将很有帮助,还请添加mapDispatch、mapState和reducer代码。我觉得在cityList数组中的某个地方,您正在覆盖这些值,因此它在console.log(list)中变为未定义。首先,我获取所有城市的名称,当我在输入字段中键入第二个字符时,它抛出未定义的错误。
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
});
};