[英]React component rendering data twice
I'm new to react and I'm currently facing an issue.
我是新来的人,目前正面临一个问题。 I want to make a conditional rendering such that if the
URL
contains a particular id I render something else but my components seems to be doing basically everything multiple times if this condition is met. 我想进行条件渲染,以便如果
URL
包含特定ID,则渲染其他内容,但是如果满足此条件,我的组件似乎基本上会多次执行所有操作。 Below is my code 下面是我的代码
import React, { useState, useEffect } from 'react';
import DriverList from './DriverList';
import './Drivers.css';
import getDrivers from '../../Helpers/fetchAny';
function Drivers(props) {
const url = window.location.href.split('/');
const last = url.length - 1;
const urlPattern = /([\d\w]*[-]).*/g;
const id = url[last];
const [driverState, setDriverState] = useState({ name: 'Hello'
});
const [toDisplayState, setToDisplayState] = useState([]);
useEffect(() => {
getDrivers('/api/drivers').then(data => {
setDriverState(data);
});
}, []);
if (!urlPattern.test(url)) {
return (
<div className="mainBody drivers">
<div className="driver-display" />
<DriverList />
</div>
);
} else {
return (
<div>
<p>Hello</p>
</div>
);
}
}
export default Drivers;
The question is if this condition is not met, it renders what it's supposed to normally not repeating anything but once (normal) when the condition is met. 问题是如果不满足此条件,它将呈现正常情况下应该重复的内容(一次)(正常)。
The component 组件
import React, { useState, useEffect } from 'react';
import getDrivers from '../../../Helpers/getDrivers';
import { Link } from 'react-router-dom';
function DriverList() {
const [driverState, setDriverState] = useState([]);
useEffect(() => {
getDrivers().then(data => {
let driverDetails = [];
for (const driver of data) {
driverDetails.push({
driverId: driver.driverID,
driverName: driver.name,
driverPhone: driver.phone,
});
}
setDriverState(driverDetails);
});
}, []);
return (
<div className="driver-list">
<p className="list-head">Drivers</p>
{driverState.map((driver, index) => {
return (
<Link
to={`/drivers/${driver.driverId}`}
className="single-list"
key={index}
>
<span className="list-image" />
<div>
<span>
<i className="mdi mdi-account" /> {driver.driverName}
</span>
<span>
<i className="mdi mdi-phone" /> {driver.driverPhone}
</span>
</div>
</Link>
);
})}
</div>
);
}
export default DriverList;
This shows the list of drivers 这显示了驱动程序列表
So apparently, I had repeated the route to that page in my App.js
显然,我在
App.js
重复了前往该页面的路线
<Route exact path="/" component={Home} />
<Route path="/dashboard" component={Home} />
<Route path="/trips" component={Trips} />
<Route path="/drivers" component={Drivers} />
<Route path="/drivers:driverId” component={Drivers} />
All I had to do was remove onE of the routes
. 我所要做的就是删除所有
routes
。
My understanding from this is that react
renders when you visit a
route` in a SPA (single page application) 我的理解是,
when you visit a
在SPA(单页应用程序)中when you visit a
路线when you visit a
, react
渲染when you visit a
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.