V—array.map 不是 function --V

Question

I'm building a weather app with AccuWeather API (calling from node server), react and redux.

when I'm calling AutoComplete API - https://developer.accuweather.com/accuweather-locations-api/apis/get/locations/v1/cities/autocomplete ,

and try to map the results, I am getting this error although it is array (and if I save the response in InitialState for working with it from first render everything work fine)

Here is the problematic code, really can't understand why if I'm getting the result in real-time and not from default this error occurs.

---

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { cityAutoComplete, clearAutoComplete, getForcast } from 
'../../../store/actions/locationActions';

import { InputLabel, TextField, Select, MenuItem, FormHelperText } 
 from '@material-ui/core'

export default function Search() {

const autoComplete = useSelector(state => state.location.autoComplete)
const dispatch = useDispatch();
const [isLoading, setIsLoading] = useState(false);

const handleChange = e => {
    if (e.target.value.length > 2 && !autoComplete && !isLoading) {
        setIsLoading(true)
        dispatch(cityAutoComplete(e.target.value))
    } else if (e.target.value.length <= 2) {
        setIsLoading(false);
        dispatch(clearAutoComplete())
    }
}

const handleSubmit = e => {
    dispatch(getForcast(e.target.value))
}

if (autoComplete) {
    if (isLoading) {
        setIsLoading(false);
    }
}
return (
    <div>
     <InputLabel id="demo-simple-select-helper-label">
       <TextField label="type 3 char for running the autoComplete" 
    onChange={e=>handleChange(e)} autoComplete="newpassword" 
          variant="outlined" />
        </InputLabel>
    { !isLoading && autoComplete &&
     <Select
      labelId="demo-simple-select-helper-label"
      id="demo-simple-select-helper"
      value=''
      onChange={handleSubmit}
     >
         {autoComplete.map(city => ( <MenuItem value={city.key}> 
                {city.LocalizedName} </MenuItem>))}

    </Select>
      }
        {isLoading && <img src={require('../../../assets/loading.svg')} /> 
      }

         <FormHelperText>Search by City Name</FormHelperText>
       </div>)
  }

---

here is a demo response for searching "lon" -

---

  [{"Version":1,"Key":"328328","Type":"City","Rank":10,
  "LocalizedName":"London","Country":{"ID":"GB","LocalizedName":"United 
  Kingdom"},"AdministrativeArea":{"ID":"LND","LocalizedName":"London"}},
  {"Version":1,"Key":"57911","Type":"City","Rank":23,
  "LocalizedName":"Longyan","Country": 
  {"ID":"CN","LocalizedName":"China"},"AdministrativeArea": 
  {"ID":"FJ","LocalizedName":"Fujian"}}, 
  {"Version":1,"Key":"77666","Type":"City","Rank":25,
   "LocalizedName":"Longgang District","Country": 
  {"ID":"CN","LocalizedName":"China"},"AdministrativeArea": 
  {"ID":"GD","LocalizedName":"Guangdong"}}, 
  {"Version":1,"Key":"2580116","Type":"City","Rank":25,
   "LocalizedName":"Longhua District","Country": 
  {"ID":"CN","LocalizedName":"China"},"AdministrativeArea": 
  {"ID":"GD","LocalizedName":"Guangdong"}}, 
  {"Version":1,"Key":"2332564","Type":"City","Rank":25,
   "LocalizedName":"Longnan","Country": 
  {"ID":"CN","LocalizedName":"China"},"AdministrativeArea": 
  {"ID":"GS","LocalizedName":"Gansu"}}, 
  {"Version":1,"Key":"2332955","Type":"City","Rank":25,
   "LocalizedName":"Longhui County","Country": 
  {"ID":"CN","LocalizedName":"China"},"AdministrativeArea": 
  {"ID":"HN","LocalizedName":"Hunan"}}, 
  {"Version":1,"Key":"2333548","Type":"City","Rank":25,
   "LocalizedName":"Longyang District","Country": 
  {"ID":"CN","LocalizedName":"China"},"AdministrativeArea":{ 
  "ID":"YN","LocalizedName":"Yunnan"}}, 
  {"Version":1,"Key":"58368","Type":"City","Rank":33,
  "LocalizedName":"Long'an County","Country": 
  {"ID":"CN","LocalizedName":"China"},"AdministrativeArea": 
  {"ID":"GX","LocalizedName":"Guangxi"}},      
{"Version":1,"Key":"58726","Type":"City","Rank":33,"LocalizedName":"Longhua 
 County","Country": 
  {"ID":"CN","LocalizedName":"China"},"AdministrativeArea": 
  {"ID":"HE","LocalizedName":"Hebei"}}, 
  {"Version":1,"Key":"61050","Type":"City","Rank":33,
   "LocalizedName":"Longchang","Country": 
  {"ID":"CN","LocalizedName":"China"},"AdministrativeArea": 
  {"ID":"SC","LocalizedName":"Sichuan"}}]

---

my store

---

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger'
import rootReducer from './reducers/rootReducer';

import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import FBConfig from '../config/FBConfig';

export const store = createStore(
  rootReducer,
  compose(
     applyMiddleware(thunk.withExtraArgument
      ({ getFirebase, getFirestore }), logger),
      reactReduxFirebase(FBConfig, {
          userProfile: 'users',
          useFirestoreForProfile: true,
          attachAuthIsReady: true
      }),
       reduxFirestore(FBConfig)
   )
);

---

and my action

---

export const cityAutoComplete = input => {
return (dispatch, getState) => {
    fetch('http://localhost:3001/autocomplete', {
            method: 'post',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ input })
        })
        .then(response => response.json())
        .then(response => {
            dispatch({ type: 'LOCATION_AUTOCOMPLETE', response })
         })

         .catch(err => dispatch({ type: 'LOCATION_ERR', err }))
   }
 }

---

thanks in advance!

---

** EDIT - By default, every response from a server comes in string, even if in the console.log shows its array or object. it is '[]' or '{}'. JSON.parse() and all working smoothly:)

Answer 1

Try destructuring value off of e.target . React creates a synthetic event in its event handlers, and sometimes the target/value won't persist when sending it to another function unless you get a reference to it.

const handleSubmit = e => {
  const { value } = e.target;
  dispatch(getForcast(value));
}

(Try this for both handleSubmit and handleChange)