對組件渲染數據進行兩次反應

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