javascript - 使用 useParams 从 url 获取值

Question

我有一个带有 Material-UI 的 React 表单。我想使用 useParams 从 URL 链接获取 id 并发出一些 API 请求以填充表单数据:

http://localhost:3001/profile?ids=9459377

主应用程序.tsx:

function App() {
  return (
      <Router>
        <Navbar />
        <Switch>
          <Route path='/ticket-profile/:ids' component={TicketProfile} />
        </Switch>
      </Router>
  );
}

我使用此代码打开一个新页面并传递 ids 参数:

history.push(`/ticket-profile/ids=${id}`)

我需要把数据放到这个页面中:

export default function TicketProfile(props: any) {
    let { ids } = useParams();
    
    const [ticket, setTicket] = useState<TicketDTO[]>([]);

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

    const getSingleTicket = async () => {
        getTicket(ids)
            .then((resp) => {
                setTicket(resp.data);
            })
            .catch((error) => {
                console.error(error);
            });
    }

但是对于这一行 let { ids } 我得到:

TS2339:属性“ids”在类型“{}”上不存在。

你知道我该如何解决这个问题吗？

Answer 1

这是网址

http://localhost:3001/profile?ids=9459377

在你的代码中

const MyComponent = () => {

 const params = new URLSearchParams(window.location.search);

就是这样!现在我们应该继续获取值并检查查询字符串是否存在

检查是否有查询；

params.has('ids')

或者获取查询字符串中的值

params.get('ids')

你也可以有条件地显示它们

console.log(params.has('ids')?params.get('ids'):"")

更新:

查看工作示例

https://codesandbox.io/s/peaceful-https-vz9y3?file=/src/App.js\这就是我们应该如何在您的情况下使用它

export default function TicketProfile(props: any) {
    const params = new URLSearchParams(window.location.search);
    const ids = params.get('ids');
    const [ticket, setTicket] = useState<TicketDTO[]>([]);

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

    const getSingleTicket = async () => {
        getTicket(ids)
            .then((resp) => {
                setTicket(resp.data);
            })
            .catch((error) => {
                console.error(error);
            });
    }