因此,请求返回JSON文件。但在控制台中,它说“未定义”,我不知道为什么。
因此,当点击按钮时,将发送来自google Place API的请求的结果;其中包含调用Info组件的PlaceDetailsAPI所需的place_id。
第一个
所以,这是我认为它的工作方式(抱歉,我是新的React)
下面是InfoPopup组件
function InfoPopup({ open, onClose, restaurant }) {
const [restaurant1, setRestaurant1] = useState([])
let id = restaurant.place_id
let URL = `/maps/api/place/details/json?place_id=${id}&key=${process.env.REACT_APP_API_KEY}`
const fetchRestaurants1 = async () => {
const res1 = await axios.get(URL)
setRestaurant1(res1.data.results);
}
useEffect(() => {
fetchRestaurants1()
console.log(restaurant1) //This is getting 'Undefined'
}, [id]);
const navigate = useNavigate()
if (!open) {return null}
return ReactDOM.createPortal(
<>
<div>
{restaurant1?.map(restaurant => (
<div key={restaurant.place_id}> {restaurant.formatted_phone_number} </div>
))}
</div>
<div className="popup">
<div className="popup-inner">
<button className="close-btn" onClick={onClose}> Close </button>
<h1 className="title"> {restaurant.name} </h1>
<ul>
{/* <li className="service">
Status: {}
</li> */}
<li className="location">
Address: {restaurant.vicinity}
Phone Number:
</li>
<li className="cost">
Cost: {restaurant.price_level}
</li>
{/* <li className="food">
Food Type:
</li> */}
</ul>
<div className="links">
<Link className="writeButton" to="/write" state={{data: restaurant}}>
Write a review
</Link>
{/* <button className="writeButton" onClick={() => navigate("/write", {data:restaurant})}>
Write a review
</button> */}
<Link className="readButton" to="/read" state={{data: restaurant}}>
Read the reviews
</Link>
{/* <button className="readButton" onClick={() => navigate("/read")}>
Read the reviews
</button> */}
</div>
</div>
</div>
</>,
document.getElementById('portal')
)
}
我想问题是在第一次渲染时,没有传递ID。但我不知道如何解决它。任何帮助都将不胜感激。
1条答案
按热度按时间7nbnzgx91#
查看以下代码块:
您正在等待GET调用的结果,这很好,因为它允许您在等待响应后在下一行中设置状态。
问题在于:当您在useEffect()中调用**fetchInvents 1()**时,您并没有等待该函数执行,因此,我们直接跳到下一行和console.log()restaurant 1,当然该行仍然是空的。
设置状态调用也会出现同样的问题。
然后过了一段时间:
发布到console的值将为null,因为JS不想在移动到下一行console.log(value)之前等待set state调用完成;
要解决此问题,请执行以下操作:使useEffect回调异步,并等待在其中进行axios.get调用的函数。示例:
当然,你还是不能在console.log上面设置状态后调用。
如果您想要一种通用的方法来记录状态更改而不用担心异步行为,您可以添加一个简单的useEffect:
其中value是任何状态变量。由于value在依赖项数组中,因此每当它发生更改时,useEffect都会触发并记录更改。