Question

我在React中编写一个CRUD应用程序，我想使用“ Axios”在删除请求之后重新加载当前的路由，其中包括对象的“ id”和“ name”。删除对象时，页面不会重新加载，显示的数据与删除前相同。我尝试了history.push，但没有成功。这实际上是我想做的： history.push( / addScenarioDetail / $ {scenarioId} / $ {name} );

   export default const AddScenarioDetail = ({ match }: Props) => {
   const {
       params: { id },
       params: { name }
   } = match;
   const classes = useStyles();
   const [scenarioId, setScenarioId] = useState('');
   const [layouts, setLayouts] = useState([]);
   const [displays, setDisplays] = useState([]);
   const [details, setDetails] = useState([]);
   const [layoutId, setLayoutId] = useState('');
   const [displayId, setDisplayId] = useState('');
   const [layoutName, setLayoutName] = useState('');
   const [displayName, setDisplayName] = useState('');
   const [detailsNames, setDetailsNames] = useState([]);
   let history = useHistory();
   const [open, setOpen] = React.useState(false);

   useEffect(() => {
       let ignore = false;
       let num = parseInt(id, 10)
       setScenarioId(num);
       async function fetchData() {
           const layoutPromise = axios("http://localhost:8080/xiboscenario/layouts");
           const displayPromise = axios("http://localhost:8080/xiboscenario/displays");
           const detailPromise = axios(`http://localhost:8080/xiboscenario/${id}/detail`);
           const layoutResult = await layoutPromise;
           const displayResult = await displayPromise;
           const detailResult = await detailPromise;
           if (!ignore) {
               setLayouts(layoutResult.data);
               setDisplays(displayResult.data);
               setDetails(detailResult.data);
           }
       }
       fetchData();
       return () => { ignore = true; }
   }, [id]);

   async function handleSubmit(e) {
   e.preventDefault();
       await axios({
           method: 'post',
           url: `http://localhost:8080/xiboscenario/${scenarioId}/detail`,
           data: {
               scenario_id: scenarioId,
               display_id: displayId,
               layout_id: layoutId
           }
       });
       history.push(`/addScenarioDetail/${scenarioId}/${name}`);
   };

   async function removeDetail(id) {
       await axios.delete(`http://anpr.sportpaleisgroep.be:28080/xiboscenario/${scenarioId}/detail`, {
           data: {
               scenariodetail_id: id
           }
       })
       // history.push(`/addScenarioDetail/${scenarioId}/${name}`);
   }


   const handleClickOpen = () => {
       setOpen(true);
   };

   const handleClose = () => {
       setOpen(false);
   };

   return (
       <div className={classes.root}>
           <Paper className={classes.tablePaper}>
                       <DetailTable details={detailsNames} removeDetail={removeDetail} />
                   </Paper>
                   <Tooltip title="Add" aria-label="add">
                       <Fab className={classes.addButton}>
                           <AddIcon onClick={handleClickOpen} />
                       </Fab>
                   </Tooltip>
           <Dialog open={open} fullWidth={true} onClose={handleClose}
               maxWidth='md' aria-labelledby="form-dialog-title">
               <DialogTitle id="form-dialog-title">Add Detail</DialogTitle>
               <div className={classes.addForm}>
                   <h2>{name}</h2>
                   <form onSubmit={handleSubmit}>
                       <FormControl className={classes.formControl}>
                           <Autocomplete
                               options={layouts.map(option => option.layout_name)}
                               id="controlled-demo"
                               value={layoutName}
                               onChange={handleLayoutChange}
                               renderInput={params => (
                                   <TextField {...params} label="Layout" fullWidth />
                               )}
                           />
                       </FormControl>
                       <FormControl className={classes.formControl}>
                           <Autocomplete
                               options={displays.map(option => option.display_name)}
                               id="controlled-demo"
                               value={displayName}
                               onChange={handleDisplayChange}
                               renderInput={params => (
                                   <TextField {...params} label="Display" fullWidth />
                               )}
                           />
                       </FormControl>
                       <br />
                       <Button variant="contained" type="submit" className={classes.saveFormButton}>Save</Button>
                   </form>
               </div>
               <br />
           </Dialog>
       </div>
     )
  }

这是我的路由器：

    <div className="App">
      <Navbar />
      <BrowserRouter>
        <Switch>
          <Route path='/' exact={true} component={Home} />
          <Route path='/scenarioTable' component={ScenarioTable} />
          <Route path='/showScenarios' component={ShowScenarios} />
          <Route path='/update/:id' component={updateScenario} />
          <Route path='/addScenarioDetail/:id/:name' component={AddScenarioDetail} />
        </Switch>
      </BrowserRouter>
    </div>

Answer 1

如果您在同一页面上用history.push做一个react-router并不会做太多，因为React看到它将显示相同的组件，因此不会全部卸载/重新安装它们，这就是React背后的想法：只会更改需要更改的内容。

相反，删除后想要的只是更新状态，以便更新UI。

通常，执行setState而不是history.push，这将使用除已删除项目以外的所有项目更新状态。

Answer 2

在历史记录中使用不同的变量（id，name）将相同的url推送到动态url'/ addScenarioDetail /：id /：name'不会重新加载内容。您需要自己在该组件中检查更新的路由。检查以下代码

componentDidUpdate = (prevProps) => {
    if (this.props.match.params.id !== prevProps.match.params.id || this.props.match.params.name !== prevProps.match.params.name) {
        //do required action here like updating state, fetching new data from api
    };
};

Answer 3

我相信一个简单的window.location.reload()就足以重新加载页面。

如果您需要重新加载到其他URL，只需window.location = "OTHER_URL"

另外，从您的代码看来，您正在使用大量useState()，如果您的状态为“复杂”，我建议您看看useReducer()吗？

在此处链接到文档：https://reactjs.org/docs/hooks-reference.html#usereducer

删除请求后重新加载当前路由

3 个答案: