Передайте параметр на страницу, данные не обновляются

#reactjs #react-native #react-hooks #react-router

#реагирует на #реагировать-родной #реагируют-крючки #реагировать-маршрутизатор

Вопрос:

У меня есть компонент навигации, в котором я передаю параметр на другую страницу, параметр передается, однако данные в раскрывающемся списке не обновляются для переданного идентификатора:

нав.:

 lt;Link to='/service/ServiceAppointment/${car.Make}'gt; { serviceAppointment } lt;/Linkgt;

страница назначения:

 const ScheduleAppointment = () =gt; {  const { id } = useParams();   console.log (id); //I can see the ID passed to the page in the console    useEffect(() =gt; {  console.log(id); //the ID is not there  scheduleAppointment(id);   });   const Appointment= () =gt; {  //call to API for open dates  //the ID never gets here   } }

Маршрутизатор:

 lt;Route exact path='/service/appointment/:id' component={ ScheduleAppointment } /gt;

как я могу изменить страницу назначения, когда на нее передается новый идентификатор?

Ответ №1:

Аргумент зависимостей useEffect is useEffect(callback, dependencies)

Давайте рассмотрим побочные эффекты и прогоны:

Не предусмотрено: побочный эффект запускается после каждого рендеринга.

 import { useEffect } from 'react';    function MyComponent() {  useEffect(() =gt; {  // Runs after EVERY rendering  });   }

Пустой массив []: побочный эффект выполняется один раз после первоначального рендеринга.

 import { useEffect } from 'react';    function MyComponent() {  useEffect(() =gt; {  // Runs ONCE after initial rendering  }, []);  }

Имеет реквизиты или значения состояния [prop1, prop2, ..., state1, state2] : побочный эффект запускается только при изменении любого значения зависимости.

 import { useEffect, useState } from 'react';  function MyComponent({ prop }) {  const [state, setState] = useState('');  useEffect(() =gt; {  // Runs ONCE after initial rendering  // and after every rendering ONLY IF `prop` or `state` changes  }, [prop, state]); }

в вашем случае попробуйте этот способ

 useEffect(() =gt; {  console.log(id); //the ID is not there  scheduleAppointment(id);  },[id]);

Ответ №2:

Пожалуйста, обновите ссылку ниже вместо вашего кода

 lt;Link to=`/service/ServiceAppointment/${car.Make}`gt; { serviceAppointment } lt;/Linkgt;

Я надеюсь, что это сработает для вас! Спасибо.