ReactJS-提交表格后如何自动刷新

Question

当我提交页面永远不会停止加载时，我必须手动刷新页面以获取表中的输入。 table.js和subm.js分为两个不同的组件。因此，如果我可以在表组件中添加SOM EventListner以在提交后再次获取API，该如何使我的页面自动刷新替代。

类提交扩展组件{

render() {
    return (
        <>
            <form action='http://localhost:3001/api/post' method="POST" onsubmit="return false">
                <input type="input" class="text" name="brand" placeholder="Brand" required />
                <input type="input" class="text" placeholder="Model" required />
                <input type="input" class="text" name="price" placeholder="Price" required />
                <button type="submit" class='button'>Submit</button> 
            </form>
        </>
    )
}

}

function table（）{

useEffect(() => {
    Axios.get("http://localhost:3001/api/get/carmodels").then((response) => { 
      setCarModelList(response.data)
    })
  }, [])

  const [carModelList, setCarModelList] = useState([])

  const DeleteCar = (val) => { 
    const next = [...carModelList];
    const removedItems = next.splice(next.indexOf(val), 1);
   const deleteCarModel = Axios.delete(`http://localhost:3001/api/delete/${val.id}`); 

   setCarModelList(next);
    return deleteCarModel

  }  

  const renderTableData = () => {
    return carModelList.map((val) => (
        <tr class>
           <td>{val.id}</td>
            <td>{val.brand}</td>
            <td>{val.model}</td>
            <td>{val.price}</td>
            <td>
                <button id="delete" onClick={() => DeleteCar(val)}>Delete</button> 
            </td>
        </tr>))
  }

return (
    <table id="table">
    <thead>
        <tr>
          <th>Id</th>
          <th>Brand</th>
          <th>Model</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
          {renderTableData()}
      </tbody>
      </table>
    );
  

}

Answer 1

代码示例为另一个在单击提交按钮时初始化为 false 的警报变量添加 UseState ，你将其设为 true，并在获取后将其恢复为 false。附图中的示例

const [alert, setAlert] = useState(true);

const handleSubmit= (e)=> {

setAlert(true)

useEffect(()=>{
// perform your fetch
 setAlert(false)
},[alert])
 
}