对组件渲染数据进行两次反应

Question

我是新来的人，目前正面临一个问题。 我想进行条件渲染，以便如果URL包含特定ID，则渲染其他内容，但是如果满足此条件，我的组件似乎基本上会多次执行所有操作。 下面是我的代码

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;

问题是如果不满足此条件，它将呈现正常情况下应该重复的内容（一次）（正常）。

组件

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;

这显示了驱动程序列表

Answer 1

显然，我在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} />

我所要做的就是删除所有routes 。

我的理解是， when you visit a在SPA（单页应用程序）中when you visit a路线when you visit a ， react渲染when you visit a