Получение значений из URL-адреса с помощью параметров использования

#javascript #reactjs #typescript

Вопрос:

У меня есть форма реакции с материалом-пользовательский интерфейс. Я хотел бы получить идентификатор по ссылке URL с помощью useParams и сделать несколько запросов 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: Property 'ids' does not exist on type '{}'.

Знаете ли вы, как я могу решить эту проблему?

Ответ №1:

Итак, это URL-адрес

 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);
            });
    }

1. Не могли бы вы показать мне , как я могу это реализовать useParams , пожалуйста?

2. Я думаю, что при таком подходе вам не нужно использовать useParams .

3. Смотрите обновления в ответе.

4. Также взгляните на это codesandbox.io/s/peaceful-https-vz9y3?file=/src/App.js

5. Попробуйте добавить строки запроса в URL-адрес в симуляторе песочницы.

Ответ №2:

Я предполагаю, что вы используете параметры использования из react-маршрутизатора. Если да, то попробуйте сделать это здесь

  let { ids } = useParams<{ ids: Array<any>}>();

1. Было бы лучше , если бы тип не any был таким, а вместо этого включал ожидаемые поля.

2. Да, это может быть лучше, как вы и предлагали. Мое быстрое решение-просто устранить проблему с машинописными текстами

Ответ №3:

Вы прокладываете неверный путь в историю. Попробуй вот так:

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