Moja odpowiedź jest trochę poza lewym polem. Rzuca światło na problem, który doprowadził mnie do tego postu. W moim przypadku wyglądało na to, że aplikacja nie renderowała się ponownie, mimo że otrzymała nowe rekwizyty.
Twórcy Reacta mieli odpowiedź na to często zadawane pytanie, coś w rodzaju tego, że jeśli (sklep) został zmutowany, w 99% przypadków reakcja nie będzie ponownie renderowana. Jeszcze nic o pozostałych 1%. W tym przypadku mutacja nie miała miejsca.
TLDR;
componentWillReceiveProps
tak state
można zsynchronizować plik z nowym props
.
Krawędź obudowy: Po state
aktualizacji, następnie aplikacja ma ponownie uczynić!
Okazuje się, że jeśli twoja aplikacja używa tylko state
do wyświetlania swoich elementów, props
może aktualizować, ale state
nie będzie, więc nie ma ponownego renderowania.
Miałem state
to zależne od props
otrzymanego od Redux store
. Danych, których potrzebowałem, nie było jeszcze w sklepie, więc pobrałem je componentDidMount
, jak trzeba . Otrzymałem rekwizyty z powrotem, kiedy mój reduktor zaktualizował sklep, ponieważ mój komponent jest połączony przez mapStateToProps. Ale strona nie została wyrenderowana, a stan wciąż był pełen pustych ciągów.
Przykładem tego jest sytuacja, w której użytkownik załadował stronę „edytuj post” z zapisanego adresu URL. Masz dostęp do postId
adresu z adresu URL, ale informacji store
jeszcze nie ma, więc możesz je pobrać. Elementy na Twojej stronie są kontrolowanymi komponentami - więc wszystkie wyświetlane dane znajdują się w state
.
Korzystając z Redux, dane zostały pobrane, sklep został zaktualizowany, a komponent jest connect
edytowany, ale aplikacja nie odzwierciedlała zmian. Przy bliższym przyjrzeniu się props
otrzymaliśmy, ale aplikacja nie została zaktualizowana. state
nie zaktualizowany.
Cóż, props
będzie aktualizować i propagować, ale state
nie będzie. Musisz konkretnie powiedzieć, state
aby zaktualizować.
Nie możesz tego zrobić w render()
, a componentDidMount
już skończyłeś swoje cykle.
componentWillReceiveProps
to miejsce, w którym aktualizujesz state
właściwości, które zależą od zmienionej prop
wartości.
Przykładowe zastosowanie:
componentWillReceiveProps(nextProps){
if (this.props.post.category !== nextProps.post.category){
this.setState({
title: nextProps.post.title,
body: nextProps.post.body,
category: nextProps.post.category,
})
}
}
Muszę wypowiedzieć się na temat tego artykułu, który wyjaśnił mi rozwiązanie, o którym nie wspomniały dziesiątki innych postów, blogów i repozytoriów. Każdy, kto miał problem ze znalezieniem odpowiedzi na ten ewidentnie niejasny problem, oto jest:
Metody cyklu życia komponentów ReactJs - szczegółowe omówienie
componentWillReceiveProps
to miejsce, w którym będziesz aktualizować, state
aby być zsynchronizowanym z props
aktualizacjami.
Po state
aktualizacji, następnie pola w zależności od state
wykonania ponownego renderowania!