Компонент не перерисовывается при нажатии на ссылку
Я использую свойство Link для реакции на переход по тому же URL-адресу, но с другим параметром. Но мой api не вызывает снова, поскольку я помещаю часть вызова api в componentDidMount (). При щелчке по URL-адресу изменяется мой параметр URL-адреса. Ниже приведен код.
componentDidMount(){
let profile_id = window.localStorage.getItem('profile_id');
if (profile_id && profile_id!==''){
this.props.fetchSingleProfile(profile_id)
}
}
Первый раз вызов API и данные успешно отрисованы. Ниже показано, как я использую ссылку.
<Link to = {this.userId}>Next</Link>
Теперь, щелкнув ссылку, я успешно перенаправляюсь на указанный URL, но, как я уже упоминал, "Компонент снова отображается при успешной маршрутизации, но api снова не вызывает". Есть ли что-нибудь в реакции, которая знает об этом, мой URL-адрес изменен, теперь снова вызовите api.
Примечание: Могу ли я использовать любой метод жизненного цикла, например: componentWillReceiveProps, но я не хочу снова вызывать api.
я отредактировал код.
так что это не только маршрут. единственный параметр также равен. почему вы вообще здесь используете <Link>? что-то вроде <button onClick = {this.loadData}> просто перезагрузит данные.
OnClick of a Link, я снова вызываю api, но это неправильный подход, которому я следую. Есть ли какой-либо метод жизненного цикла, который поможет мне снова вызвать api?
Ответы 1
But my api is not calling again as i put the api call part in the componentDidMount().
У вас один и тот же маршрут, поэтому визуализируется один и тот же <Route>. Все вложенные компоненты остаются такими же, поэтому вместо повторного монтирования они просто обновляются.
У вас есть несколько способов справиться с этим:
- Получать данные не только на
componentDidMount, но и наcomponentDidUpdate - Используйте
keyдля перемонтировать компонент
Это невозможно сделать только с react-router<Link />, так как это фактически не его ответственность
Спасибо за ваш быстрый ответ. не могли бы вы показать мне пример, так как это срочно.
вы говорите, мне нужно использовать componentDidUpdate и снова вызвать api. Если мне нужно снова вызвать api, я могу вызвать его функцию onClick, в которой будет вызывать api. но это неправильный подход.
componentDidUpdate получает обновление даже для небольшого изменения, должны ли мы сохранить некоторую переменную state, чтобы проверить, должен ли компонент также получать данные в componentDidUpdate?
@TheCoder, вы хотите проверить и props, и state в cDU? Я не уверен, следую ли я за твоим вопросом
Не могли бы вы добавить к своему вопросу пример кода, показывающий нам, как вы это делаете?