Javascript React and Redux:错误无法读取属性'；过滤器'；未定义的

在输入字段中键入内容时，出现以下错误：无法读取未定义的属性“filter”。当我在console.log中记录错误后，我可以看到数据成功地存储在reducer state peopleList数组中。那么，为什么我在下面的react应用程序中调用filter时会出现错误呢

更新 正如Konstantin在下面的评论中提到的，我的对象和函数都有相同的名称，即searchPeople。我更改了函数名，它成功地工作了

//React app
class SearchPeople extends Component{

  state = {
    searchArray: []
  };


    static propTypes = {
      searchPeople: PropTypes.object.isRequired,
      error: PropTypes.object.isRequired,
      searchPeople: PropTypes.func.isRequired
    };

handleOnKeyUp = (e) =>{

  const {peopleList} = this.props.searchPeople

  let userData = e.target.value; //When user enters data into input field

  if(userData){
    this.props.searchPeople(userData)

      this.setState({
        searchArray: peopleList.filter((data) =>{
          return data.name.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase())
        })
      })
  }
  
};
    render(){
      let {searchArray} = this.state


      return(
        <div id= "search-people" className="TopNavbarSearchMainContainer">
          <div className="SearchInputContainer">
            <input type="text" className="TopNavbarSearchBar" placeholder="Search People" 
 spellCheck="false" onKeyUp={this.handleOnKeyUp}/>
            <div className="InstantSearchResultsContainer">
            {this.renderSearchResults()}
         </div>
      </div>
     </div>
)}
};
const mapStateToProps = state => ({
  searchPeople: state.searchPeople,
  error: state.error
});
const mapActionsToProps = {
  searchPeople
};

export default connect(mapStateToProps, mapActionsToProps)(SearchPeople);

---

如果它正确地保存在redux存储中，那么问题可能在于

MapStateTrops

或在组件中如何访问它。请出示您的

mapStateToProps

地图，好吗？您好@larz。我用mapStateToProps更新了上面的react应用程序代码。感谢您将

searchPeople

作为一个对象和一个fn，它是相同的变量名。如果未定义，请提供默认值，

const{peopleList=[]}=this.props.searchPeople

谢谢大家@康斯坦丁是正确的。对象和函数都有相同的名称。我更改了函数名，现在它已成功运行。

//Redux reducer
const initialState = {
  peopleList: [],
  isLoading: false,
  postsPerPage: 15
};

//eslint-disable-next-line
export default function(state = initialState, action){
  switch(action.type){
    case LOADING_DATA:
      return{
        ...state,
        isLoading: true
      };
    case UPDATE_SEARCH_PEOPLE_LIST:
      return{
        ...state,
        peopleList: action.payload,
        isLoading: false
      };
    default:
      return state;
  }

}

//Action functions/types
export const searchPeople = (data) => ({
  type: SEARCH_PEOPLE,
  payload: data
});

export const updateSearchPeopleList = (data) => ({
  type   : UPDATE_SEARCH_PEOPLE_LIST,
  payload: data
});

//Search People Middleware
export const getSearchPeopleFlow = ({getState, dispatch}) => next => action => {
  next(action);
  if (action.type === SEARCH_PEOPLE) {
    const URL = `/api/user/findUserByName/${action.payload}`;
    dispatch(apiGetRequest(URL, setAuthorizationHeader(getState), null, SEARCH_PEOPLE_SUCCESS, SEARCH_PEOPLE_ERROR));
dispatch(loadingData())
  }
};

// on successful fetch, process the search people data
export const processSearchPeopleCollection = ({dispatch}) => next => action => {
  next(action);

  if (action.type === SEARCH_PEOPLE_SUCCESS) {
console.log(action.payload)
    dispatch(updateSearchPeopleList(action.payload.data.user));
  }
};

//apiGetRequest Middleware
export const getApi = ({dispatch, getState}) => next => action => {

  if(action.type === GET_API_REQUEST) {
    const {url, config, onSuccess, onError } = action.meta;

    axios.get(url, config)
      .then((data) => {dispatch({ type: onSuccess, payload: data})})
      .catch(error => dispatch({ type: onError, payload: error }))
  }
}