我有一个问题，从我的列表中删除元素后，组件不想重新呈现。当我通过路由到一些子页面，然后回来，项目已经被删除，同样如果我排序列表，然后它也消失了。问题是，我不想强迫用户刷新网站或排序，以查看效果。它曾经工作，如果我传递到
deviceList props as a "props.data" instead of "devices"
(will粗体代码中的地方）。有人知道如何修复它吗？我仍然是一个新的React挂钩，也许我只是需要调整useEffect更好一点， prop 。selectedDevices是从redux和只是得到删除的项目的ID，我的代码：
母公司：

function App(props) {
  const [data, setData] = useState("")
  const [filter, setFilter] = useState([])

  useEffect(() => getDeviceDataTotal(), [])

  const getDeviceDataTotal = () => {
    console.log('refresh clicked')
    fetch("http://localhost:4000/device")
      .then(res => res.json())
      .then(res => setData(res))
      .catch(err => {
        throw err;
      });
  };

  const deleteDevices = (e) => {
    console.log('delete clicked')
    props.selectedDevices.map(el => {
      return fetch(`http://localhost:4000/device/delete/${el}`, {
        method: "DELETE"
      })
        .then(res => res.json())
        .then(() => getDeviceDataTotal())
        .catch(err => {
          throw err;
        });
    });
  }

  const filterList = e => {
    let filteredList;
    filteredList = data.filter(el => {
      return el.device_id.includes(searched);
    });
    setFilter(filteredList)
  };

  return (
    <BrowserRouter>
      <MuiThemeProvider theme={createMuiTheme(theme("#96BF1B", "#ffffff"))}>

        <Switch>
          <Route
            exact
            path="/"
            render={() => <Dashboard classes={classes} dataDevice={data} refresh={getDeviceDataTotal} filtered={filter} filterList={filterList} deleteDevices={deleteDevices}/> }
          />
          ......
        </Switch>
      </MuiThemeProvider>
    </BrowserRouter>
  );
}

子组件：

function Dashboard(props) {
  const [selectedSort, setSelectedSort] = useState("1")
  const [devices, setDevices] = useState(props.dataDevice)

  useEffect(() => {
    let isSubscribed = true
    const fetchData = async() => {
      try {
        const res = await fetch("http://localhost:4000/device")
        const response = await res.json()
        if (isSubscribed) {
          setDevices(response)
         }
      } catch (err) {
        console.log(err)
      }
    }

    fetchData()
    return () => isSubscribed = false
  },[])

  useEffect(() => props.refresh() ,[devices])

  useEffect(() => sortDeviceData(), [selectedSort])

  const sortDeviceData = () => {
    switch(selectedSort) {
      case "device":
        (filtered.length ? filtered : dataDevice).sort(function(a,b) {
          return (a.device_id.toUpperCase() < b.device_id.toUpperCase()) ? -1 : (a.device_id.toUpperCase() > b.device_id.toUpperCase()) ? 1 : 0
        })
        setDevices(dataDevice)
        break;
      case "customer":
        (filtered.length ? filtered : dataDevice).sort(function(a,b) {
          return (a.customer.toUpperCase() < b.customer.toUpperCase()) ? -1 : (a.customer.toUpperCase() > b.customer.toUpperCase()) ? 1 : 0
        })
        setDevices(dataDevice)
        break;
      case "server":
        (filtered.length ? filtered : dataDevice).sort(function(a,b) {
          return (a.server.toUpperCase() < b.server.toUpperCase()) ? -1 : (a.server.toUpperCase() > b.server.toUpperCase()) ? 1 : 0
        })
        setDevices(dataDevice)
        break;
      case "creation":
        (filtered.length ? filtered : dataDevice).sort(function(a,b) {
          return (a.createdAt.toUpperCase() < b.createdAt.toUpperCase()) ? -1 : (a.createdAt.toUpperCase() > b.createdAt.toUpperCase()) ? 1 : 0
        })
        setDevices(dataDevice)
        break;
      case "update":
        (filtered.length ? filtered : dataDevice).sort(function(a,b) {
          return (a.updatedAt.toUpperCase() < b.updatedAt.toUpperCase()) ? -1 : (a.updatedAt.toUpperCase() > b.updatedAt.toUpperCase()) ? 1 : 0
        })
        setDevices(dataDevice)
        break;    
      default: 
        return setDevices(dataDevice)
    }
  }

  const { classes, logged, dataDevice, filtered } = props;
  return logged ? (
    <main style={{ display: "flex" }} key={dataDevice}>
      <section className={classes.sectionLeftContainer}>

        <div className={classNames(classes.search, classes.tableBackground)}>
          <InputBase
            placeholder="Search…"
            classes={{
              root: classes.inputRoot,
              input: classes.inputInput
            }}
            inputProps={{ "aria-label": "Search" }}
            onChange={e => props.getSearched(e.target.value)}
          />
          <Button
            variant="outlined"
            className={classes.searchBtn}
            onClick={e => props.filterList(e)}
          >
            Search
          </Button>
          <Button
            variant="outlined"
            className={classes.btnAddDevice}
            onClick={e => {
              if (window.confirm("Are you sure you want to delete this device")) {
                props.deleteDevices(e);
              }
            }}
          >
            <DeleteIcon />
            Delete devices
          </Button>
        </div>
        <div>
          <FormControl className={classes.selectContainer}>

            <Select 
              value={selectedSort} 
              style={{position: 'absolute', right: 0, bottom: 10, width: 150}}
              onChange={e => setSelectedSort(e.target.value)}
              >
              <MenuItem value="1">Default</MenuItem>
              <MenuItem value="device">Device</MenuItem>
              <MenuItem value="customer">User</MenuItem>
              <MenuItem value="server">Server</MenuItem>
              <MenuItem value="creation">Creation date</MenuItem>
              <MenuItem value="update">Update date</MenuItem>
            </Select>
          </FormControl>
        </div>
        <div>
          <DeviceList
            classes={classes}
            **deviceData={devices} if props.data - works well but sorting doesn't work**
            filtered={filtered}
          />
        </div>
      </section>
    </main>
}