React组件报错：'return'在函数外部，寻求技术协助

以下是修复后的完整代码：

import React, { useState, useEffect}  from "react";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";

const Editorg = () => {
  let navigate = useNavigate();
  const {id} = useParams();
  console.log(id);

  const [user, setUser] = useState ({
    name:"",
    poname:"",
    type:"",
    ostatus:"",
  });
  const { name, poname, type, ostatus } = user;
  
  const onInputChange = e => {
    setUser({...user, [e.target.name]: e.target.value });
  };

  useEffect(() => {
    loadUser();
  }, []); 

  const onSubmit = async e => {
    e.preventDefault();
    await axios.put(`http://localhost:3001/users/${id}`, user);
    navigate("/");
  };

  const loadUser = async () =>{
    const result = await axios.get(`http://localhost:3001/users/${id}`);
    setUser(result.data);
  };
 
  return ( 
    <div className="container">
      <div className="w-75 mx-auto shadow p-5">
        <h5 className="text-left mb-4"> Edit Organization </h5>
        <form onSubmit={e => onSubmit(e)}>
          <div className="form-group">
            <label> Organization Name </label>
            <input type="text" className="form-control" name="name" value={name} 
              onChange={e => onInputChange(e)}
            />
          </div>

          <div className="form-group">
            <label> Parent Organization Name </label>
            <input type="text" className="form-control" name="poname" value={poname} 
              onChange={e => onInputChange(e)}
            />
          </div>

          <div className="form-group">
            <label> Type </label>
            <input type="text" className="form-control" name="type" value={type} 
              onChange={e => onInputChange(e)}
            />
          </div>

          <div className="form-group">
            <label> Organization Status </label>
            <input type="text" className="form-control" name="ostatus" value={ostatus} 
              onChange={e => onInputChange(e)}
            />
          </div>

          <div className="container">
            <div className="btn-6">
              <button className="btn btn-danger float-right">Update</button>
            </div>
          </div>
        </form>
      </div>
    </div>        
  );
}

export default Editorg;

错误修复细节： #

• 核心报错原因：函数提前闭合：useEffect代码块后面多了一个};，直接让Editorg组件函数提前结束，导致后续的onSubmit、loadUser函数和return语句都处于函数外部，删掉这个多余的};就能解决「return outside of function」的语法错误。
• 模板字符串解析失败：Axios请求URL里的${id}变量需要用反引号`包裹才能解析，原代码用了单引号'无法识别变量，把两个请求的URL引号替换为反引号即可。
• navigate调用方式错误：useNavigate钩子返回的是一个直接调用的函数，无需使用.push()方法，将navigate.push("/")改为navigate("/")即可正常跳转。

内容的提问来源于stack exchange，提问作者Gagana Geethanjana