0
을 내가 react-router에 새로운 오전과 지금 내가 내 응용 프로그램에서 다음과 같은 경로를 가지고 통화를 Github API에 연결하고 특정 Repo에 대한 문제 목록을 검색하는 데 사용됩니다. .이 componentDidMount()이다 위해무한 componentDidUpdate()는 반응 라우터
그때의 Results 구성 단계는 다음 코드이다 :
componentDidMount() {
const {
username,
reponame,
page,
perPage
} = this.props.params;
this.sendRequest(username, reponame, page, perPage);
}
sendRequests
this.state = {
data: [], // here
lastPage: -1,
errorMessage: ''
}
이제는 input의 값을 변경하려고 할 때까지 잘 작동합니다.
앞에서 알 수 있듯이 Result 구성 요소는 마운트 해제되지 않습니다. 대신 componentWillReceiveProps()을 호출하고 기존 구성 요소를 업데이트합니다. AFAIK componentDidUpdate()에서 사이드 호출을 수행하는 것이 안전하므로 위의 코드를 componentDidMount()에서 복사하여 거기에 붙여 넣었습니다. 이 방법은,하지만 (그리고 그것은 절대적으로 합리적입니다) componentDidMount() 반복해서 호출되고 있습니다.
나는 순간에 함께했다 유일한 해결 방법은 sendRequest() 자체를 과거와 현재 데이터를 비교하고 deep-equal 패키지를 통해 다른 경우에만 내부 setState()를 호출, 그래서이처럼 보이는 :
if (!equal(res, this.state.data)) {
this.setState({
...this.state,
data: res,
lastPage
});
}
이것이 좋은 패턴으로 간주 되나요? 아니면이 문제를 해결할 더 좋은 방법이 있습니까?
당신이 문자열 비교를 만들 수있는이 빠르게해야한다. 하지만 상태의 데이터를 비교한다면'this.setState ({data : res})'를 호출하는 것만으로 충분할 것이다. – Raulucco