我有一个搜索框,当用户输入 5 个或更多字符时,它应该在搜索框中显示完整地址,IT 工作正常,但现在的问题是当城市名称不匹配时,它应该显示错误消息。 .问题是,匹配的城市名称和不匹配的城市都显示错误消息。
我该如何解决这个问题?请问有人可以帮我吗?
这是代码
import React, { useState } from 'react'
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import * as getallcoordiantes from '../../src/Redux/googlemaps/bigbasket.actions';
const GetGeoCoordinates = () => {
const [storeDetails, setstoreDetails] = useState({
name: ""
});
const [validCityName, setvalidCityName] = useState(false)
const [refObj, setrefObj] = useState({
geo: {
lat: 32.776272,
long: -96.796856,
},
name: "Dallas",
palce: "US",
});
const [warning, setwarning] = useState("");
const dispatch = useDispatch();
const storeInfo = useSelector((state) => state.fetchAllData.storeInfo);
useEffect(() =>{
if(storeInfo?.features){
//console.log(storeInfo?.features[0]?.place_name)
//setstoreDetails({ name: storeInfo?.features[0]?.place_name });
const coordinates = storeInfo?.features[0]
? storeInfo?.features[0].center
: [];
// console.log(coordinates);
//console.log(storeInfo?.features[0]?.text);
if(coordinates[0] === refObj.geo.long && coordinates[1] === refObj.geo.lat){
if (refObj.name !== storeInfo?.features[0]?.text) {
setwarning("Entered City Name is Invalid");
} else {
setstoreDetails({ name: storeInfo?.features[0]?.place_name });
setwarning("");
}
} else {
setwarning("Please Enter a Valid City");
}
}
},[storeInfo])
const hanldeChange = (e) => {
let newStoreDetails = { ...storeDetails };
newStoreDetails[e.target.name] = e.target.value;
// console.log(newStoreDetails);
setstoreDetails(newStoreDetails)
}
const getStoreDetails = () => {
if(storeDetails.name.length <=4){
setvalidCityName(true)
// setwarning("");
}else{
setvalidCityName(false);
// setwarning("");
dispatch(getallcoordiantes.fetchcoordinates(storeDetails.name));
}
}
useEffect(() => {
getStoreDetails();
// setvalidCityName(false);
// setwarning("");
}, [storeDetails?.name])
return (
<div>
<h2>Search For Store</h2>
<form>
<input type="text" name="name" value={storeDetails.name} onChange={(e) => { hanldeChange(e) }} />
<button onClick={getStoreDetails} type="button">Get Location</button>
</form>
{/* {validCityName && <p>Type Minimum 5 Characters</p>} */}
<p>{warning}</p>
</div>
)
}
export default GetGeoCoordinates
None
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)