#reactjs #react-native #render
#reactjs #react-native #рендеринг
Вопрос:
Я новичок в react, и у меня возникли некоторые проблемы с повторным рендерингом компонента. У меня есть компонент CodeFeed с route / code / feed?user_id=${id}, который отображает список с сообщениями пользователей. Этот список можно фильтровать по идентификатору пользователя.В случае, если user_id не определен, будут отображаться сообщения всех пользователей.
На моей панели навигации у меня есть две ссылки: канал кода (в котором отображаются сообщения для всех пользователей) и Мои коды (в котором отображаются коды для текущего пользователя сеанса).
Если пользователь нажмет на ленту кода (/code/feed ), компонент отобразит и отобразит список со всеми сообщениями пользователей, но если пользователь сразу после этого нажмет на Мои коды (/code/feed?user_id=session_user ), содержимое ленты кода останется, потому что компонент не будетповторите рендеринг для отображения нового содержимого. Чтобы отобразить новое содержимое, компонент должен получить новый идентификатор пользователя из URL-адреса, но он получает его только в том случае, если компонент отображается снова.
Я думал об использовании состояния и изменении значения id из маршрута. Я использую хук useEffect() и попытался повторно отобразить компонент, передав второму аргументу идентификатор. Проблема в том, что я не знаю, когда пришло время изменить значение id, чтобы изменить состояние компонента, чтобы я мог запустить рендеринг.
Вот мой компонент и то, что я пытался сделать до сих пор: https://gist.github.com/dayanamdr/2ac0880aa4d5f969658a6ffede3479bb
Ответ №1:
Для повторного отображения той же страницы с новым ключом изменения данных
Установите новый ключ в том же «шаблоне», и страница будет перемонтирована как новый компонент. Это должно дать вам желаемый эффект.
key В react помечается уникальный компонент, поэтому он является обязательным в списках, чтобы react мог легко отслеживать, где находится каждый компонент. При изменении ключа компонента он идентифицируется как новый компонент и, следовательно, размонтирует старый и смонтирует новый. Это полезно при замене страниц, использующих один и тот же компонент. Конечно, это тяжелее, чем замена только некоторых компонентов, но если ваша страница не очень тяжелая, у вас не должно возникнуть проблем с этим методом.
const myPage = (props) => {
return (
<div key={props.uid}>
{props.children}
</div>
)
}
Ответ №2:
Страница повторно отображается только при изменении состояния или реквизита. Вы можете изменить некоторое состояние внутри компонента, чтобы вызвать повторный рендеринг .