未捕获的类型错误：无法读取未定义(读取"图像")预订汽车的属性.js

Question

APP.JSimport/App.css'；从"导入｛BrowserRouter as Router，Routes，Route，Navigate｝；反应路由器dom"；；import Home from"/pages/Home"；；import Login from"/pages/Login"；；import Register from"/pages/Register"；；从"导入BookingCar/pages/BookingCar"；；导入"；antd/dist/antd.css">

function App() {
return (
<Router>
<Routes>
<Route path='/' element={<Home/>}/> 
<Route path="/login" element={<Login/>}></Route>
<Route path="/register" element={<Register />}></Route>
<Route path="/booking/:id" element={<BookingCar />}></Route>
</Routes>
</Router>

)；}

导出默认应用程序；

BookingCar.js

import React, {useState,useEffect} from "react";
import { useDispatch, useSelector } from "react-redux";
import { getAllcars } from "../redux/action/carsAction";
import { useParams } from 'react-router-dom';
import Spinner from "../components/Spinner";
import DefaultLayout from "../components/DefaultLayout";
import  { Row, Col} from "antd";

export default function BookingCar({match}){
const { carid } = useParams();
const {cars} = useSelector(state => state.carsReducer)
const {loading} = useSelector(state => state.alertReducer)
const [car, setcar] = useState({})
const dispatch = useDispatch()

useEffect(() => {
dispatch(getAllcars())
if(cars.length>0){
setcar(cars.find(o=>o._id === carid))
}
}, [cars])
return(
<DefaultLayout> 
{loading  && (<Spinner/> )}
<Row>
<Col lg={10} sm={24} xs={24}>
<img alt=""src={car.image} className="carimg"/>

</Col>

</Row>
</DefaultLayout> 

)

}

Home.js

import React, {useState,useEffect} from "react";
import { useDispatch, useSelector } from "react-redux";
import DefaultLayout from "../components/DefaultLayout";
import { getAllcars } from "../redux/action/carsAction";
import  { Button, Row, Col} from "antd";
import {Link} from "react-router-dom";
import Spinner from "../components/Spinner";
export default function Home(){
const {cars} = useSelector(state => state.carsReducer)
const {loading} = useSelector(state => state.alertReducer)
const dispatch = useDispatch()
useEffect(() => {
dispatch(getAllcars())
}, [])
return(

<DefaultLayout> 
{loading === true && (<Spinner/> )}
<Row justify="center" gutter={16} className="mt-5">
{cars.map(car=>{
return <Col lg={5} sm={24} xs={24}> 
<div className="car p-2 bs1 ">
<img alt=""src={car.image} className="carimg"/>
<div className="car-content d-flex align-items-center justify-content-between">
<div> 
<p>{car.name}</p> 
<p>{car.rentPerHour} Rent Per Hour</p> 
</div> 
<div> 
<button className="btn1 mt-2"><Link to={`/booking/${car._id}`}>Book now </Link></button> 

</div>
</div> 
</div> 
</Col> 
})}
</Row>
</DefaultLayout> 
)

}在BookingCar.js中，我试图获取汽车的详细信息，如id(图像(，但我遇到了错误所以请帮我解决这个问题

Answer 1

您正试图在car加载/应用到状态之前访问它。在尝试使用之前，先检查它是否存在

{car && (
<Row>
<Col lg={10} sm={24} xs={24}>
<img alt=""src={car.image} className="carimg"/>
</Col>
</Row>
)}

Answer 2

carid未定义，因为它不是已定义的路由参数(path="/booking/:id"(，所以.find函数返回undefined。

您有有效的car初始状态

const [car, setcar] = useState({});

所以您应该能够从car中销毁(car.image&<img alt=""src={car.image} className="carimg"/>(而不会出现问题。稍后通过cardid路由参数筛选cars时会出现此问题。

useEffect(() => {
dispatch(getAllcars());
if (cars.length > 0) {
setcar(cars.find(o => o._id === carid));
}
}, [cars]);

如果找不到匹配项，array.find可能会返回undefined，因此UI应该对此进行处理。路由匹配参数也是始终字符串，因此如果_id字段不是"string"类型，则严格相等将不起作用。尝试通过转换为字符串来进行类型安全比较。

cars.find(o => String(o._id) === carid)

return (
<DefaultLayout> 
{loading  && <Spinner />}
{car && (
<Row>
<Col lg={10} sm={24} xs={24}>
<img alt=""src={car.image} className="carimg" />
</Col>
</Row>
)}
</DefaultLayout>
);

最后，将路由匹配参数定义为":id"，但在组件中销毁一个carid。确保匹配参数匹配。

如果路线为：

<Route path="/booking/:id" element={<BookingCar />} />

使用const { id } = useParams();

否则，更新路由参数以匹配代码：

<Route path="/booking/:carid" element={<BookingCar />} />

使用const { carid } = useParams();