TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) - 为什么？ 这是什么意思？ 如何解决？

Question

I was trying to use react useContext hook between search.js and result.js component but somehow it's not working.

I want to send data from one component to another. using props is a bit complex so I decided to use context api. I added value as well but why it's not iterable? It's reaching the result component but that destructing line of contextApi is making a big issue here.

The error I am getting is TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

search.js code ->

import React, { createContext, useState } from 'react';
import { useHistory, useParams } from 'react-router';
import './Search.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Link } from 'react-router-dom';
import vehicleData from '../Home/vehicleData.json';

export const PlaceContext = createContext();

const Search = () => {
    const [searchPlace, setSearchPlace] = useState({
    from: '',
    to: ''
})

const [route, setRoute] = useState({
    from: '',
    to: ''
})

const {type} = useParams();
let ride;

vehicleData.map(vehicle => {
    
    if(vehicle.Name === type) {
        ride = vehicle.Name;
    }
})


const handleBlur = (event => {
    const newSearchPlace = {...searchPlace}
    newSearchPlace[event.target.name] = event.target.value;
    setSearchPlace(newSearchPlace);
})

const history = useHistory();

const resultPage = rideOption => {
    const url = `/result/${rideOption}`;
    history.push(url);
    console.log("pacche");
  }

const handleClick = (event) => {
    if (searchPlace.from && searchPlace.to) {
        setRoute(searchPlace);
        console.log(searchPlace, " && ", route);
    }
}

console.log(searchPlace);

return (
    <PlaceContext.Provider value={[searchPlace, setSearchPlace]}>
        <div className="d-flex flex-column searchField">
            <div className="inputArea">
                <h4>From</h4>
                <input onBlur={handleBlur} name="from" id="fromField" type="text" placeholder="Type Your Starting Point" />
            </div>
            <div className="inputArea">
                <h4>To</h4>
                <input onBlur={handleBlur} name="to" id="toField" type="text" placeholder="Type Your Destination Point" />
            </div>
            <button onMouseEnter={handleClick} onClick={() => resultPage(ride)} className="checkBtn btn btn-success btn-outline-info btn-lg m-3">Check</button>
        </div>
    </PlaceContext.Provider>
    );
};

export default Search;

and the result.js code ->

import { useParams } from 'react-router';
import 'bootstrap/dist/css/bootstrap.min.css';
import './Result.css';
import vehicleData from '../Home/vehicleData.json';
import { PlaceContext } from '../Search/Search';


const Result = () => {

    const [searchPlace, setSearchPlace] = useContext(PlaceContext);

    console.log(searchPlace);

    const {ride} = useParams();
    let transportOption = ride;

    let transportName, transportImg;

    vehicleData.map(vehicle => {
        if(vehicle.Name === transportOption) {
            transportName = vehicle.Name;
            transportImg = vehicle.imgUrl;
        }
    })
    
    return (
        <div className="d-flex justify-content-between showComponent">
            <div className="placeAndPrice">
                <div className="placeName">
                    <p>From : {}</p>
                    <p>To   : {}</p>
                </div>
                <div className="d-flex justify-content-around pricePart">
                    <img src={transportImg}/>
                    <div className="d-flex flex-column priceBox">
                        <p>{transportName}</p>
                        <p>131 Taka</p>
                    </div>
                </div>
            </div>
            <div className="mapBox">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7304.049644099905!2d90.3781836249269!3d23.746494238365205!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b8b0e848958f%3A0xd56e2e3180c6a3ce!2sKalabagan%2C%20Dhaka%201205!5e0!3m2!1sen!2sbd!4v1616325753856!5m2!1sen!2sbd" loading="lazy"></iframe>
            </div>
        </div>
    );
};

export default Result;```



So what is the error and how to solve it?

Answer 1

The error comes when you try to loop over a non-iterable entity. In your case vehicleData seems to be that object ( non-iterable ) instead of an array ( iterable ).

EDIT - I think the above would have given .map is not a function . One thing I noted is that you are not actually having any {children} prop being used in the PlaceContext.Provider so how are you actually able to do the following:-

<Search>
<Result/>
</Search>

Ideally your PlaceContext.Provider bit should have following type of implementation:-

return (
    <PlaceContext.Provider value={[searchPlace, setSearchPlace]}>
        /* {Your own divs and bla bla} */
        {children} 
       /* the above will come from Search prop */
    </PlaceContext.Provider>
    );
};

You can directly use Result instead of children too if you don't have many children to consider.

Please check whether you implementation is in line with what is described here - https://reactjs.org/docs/context.html#contextprovider

Answer 2

When I see your code, you are importing vehicleData from the json file (vehicleData.json) You may want to check if vehicleData is imported correctly by console.log(vehicleData) . If the data is imported as you expected, then please check if vehicleData is an array type. If not, you cannot use map function. If your data is an object type, then you can use something like following:

for (const [key, value] of Object.entries(object)) {
  console.log(`${key}: ${value}`);
}