TypeError:对象不可迭代(无法读取属性Symbol(Symbol.iterator))-为什么?这是什么意思?如

Question

我试图在search.js和result.js组件之间使用react useContext钩子，但不知怎么的，它不起作用。

我想将数据从一个组件发送到另一个组件。使用props有点复杂，所以我决定使用contextapi。我也添加了值，但为什么它不可迭代？它正在到达结果组件，但contextApi的破坏线在这里造成了一个大问题。

我得到的错误是TypeError:对象不可迭代(无法读取属性Symbol(Symbol.iterator((

search.js代码->

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;

和result.js代码->

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

当我看到您的代码时，您正在从json文件(vehicleData.json(导入vehicleData。您可能需要检查console.log(vehicleData)是否正确导入了vehicleData。如果数据按预期导入，请检查vehicleData是否为数组类型。否则，您将无法使用映射功能。如果您的数据是一种对象类型，那么您可以使用以下内容：

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

Answer 2

当您试图在不可迭代的实体上循环时，会出现错误。在您的案例中，vehicleData似乎是那个对象(不可迭代(，而不是一个数组(

iterable编辑-我认为以上内容会给出.map is not a function。我注意到的一件事是，你实际上没有在PlaceContext.Provider中使用任何{children}道具，那么你实际上如何才能做到以下几点：-

<Search>
<Result/>
</Search>

理想情况下，PlaceContext.Provider位应该具有以下类型的实现：-

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

如果没有太多的children需要考虑，也可以直接使用Result而不是children。

请检查您的实现是否符合此处描述的内容-https://reactjs.org/docs/context.html#contextprovider