React 组件渲染数据两次答案

【问题标题】：React component rendering data twiceReact 组件渲染数据两次
【发布时间】：2019-06-28 17:36:20
【问题描述】：

我是新来的反应，我目前面临一个问题。我想做一个条件渲染，这样如果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;

这显示了驱动程序列表

【问题讨论】：

您能展示一下您的 DriverList 组件中的内容吗？
@ridoansaleh 我已经进行了编辑
但即使我在没有 DriverList 的情况下执行此操作，它仍然显示两次
是的，这很正常，因为您调用 setToDisplayState 来更新导致第二次渲染的类状态。尝试删除它，它会渲染一次。当然，您的数据将是空的。只是为了您的理解目的。
@ridoansaleh 谢谢我修好了。问题出在我的 App.js 路线上，显然，我有一条通往同一页面的路线。

标签： javascript reactjs react-router

【解决方案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 中的一个。

我的理解是react在SPA（单页应用程序）中渲染when you visit aroute`

【讨论】：