대응해야 할 시기JS 구성 요소가 소품에서 상태를 업데이트하기 위해 AJAX를 호출합니까?
엔티티에 대한 정보를 표시하는 React 구성 요소가 있습니다.엔티티의 ID는 속성을 통해 전달됩니다.구성 요소는 "componentDidMount"에서 AJAX 호출을 시작하여 엔티티를 가져오고 호출이 완료/실패하면 상태를 업데이트합니다.
이것은 엔티티 ID가 변경될 때(소품을 통해) 구성 요소가 새 데이터를 가져오지 않는 것을 제외하고는 잘 작동합니다.
"componentWillReceiveProps"에서 호출을 시작하려고 했지만, 그 단계에서 구성 요소는 여전히 오래된 속성 집합을 가지고 있습니다.다음 제안을 AJAX 호출 방법으로 전달해야 하는데, 그것은 옳지 않은 것 같습니다.
속성 변경에 따라 구성 요소가 비동기적으로 상태를 업데이트하도록 하는 가장 좋은 방법은 무엇입니까?
저도 반응이 처음이라 플럭스 아키텍처가 조금 위협적입니다.당신이 말한 대로 하고 있어요.componentWillMountAJAX를 통해 초기 데이터를 로드한 다음componentWillReceiveProps와 함께nextProps속성이 변경될 때 새 데이터를 다시 로드하는 방법:
var Table = React.createClass({
getInitialState: function() {
return { data: [] };
},
componentWillMount: function(){
this.dataSource();
},
componentWillReceiveProps: function(nextProps){
this.dataSource(nextProps);
},
dataSource: function(props){
props = props || this.props;
return $.ajax({
type: "get",
dataType: 'json',
url: '/products?page=' + props.page + "&pageSize=" + props.pageSize
}).done(function(result){
this.setState({ data: result });
}.bind(this));
},
render: function() {
return (
<table className="table table-striped table-bordered">
<Head />
<Body data={this.state.data}/>
</table>
);
}
});
훅스componentWillMount그리고.componentWillReceivePropsReact v16.3.0(소스) 이후에는 더 이상 사용되지 않습니다.
AJAX 요청은 다음 사이트에서 수행해야 합니다.componentDidMount구성 요소가 처음 렌더링된 후(소스) 즉시 데이터를 로드해야 하는 경우 후크.일부 속성이 변경된 후 데이터를 새로 고치려면 다음을 사용해야 합니다.componentDidUpdate낚싯바늘
그러나 무한한 요청/업데이트 루프를 시작하지 않으려면 다른 세 가지 라이프사이클 후크를 사용해야 합니다.다음을 기준으로 게시물 목록을 업데이트한다고 가정합니다.props.category변경 사항:
state두 가지 특성이 있어야 합니다.category그리고.currentCategory구성 요소의 생성자에 null을 설정합니다.getDerivedStateFromProps업데이트에 필요합니다.state.category새로운 것부터props.category;shouldComponentUpdate두 가지를 비교하는 데 필요합니다.state.category그리고.state.currentCategory구성 요소를 업데이트해야 하는지 여부 결정getSnapshotBeforeUpdate의 여부를 결정하는 데 필요합니다.componentDidUpdateAJAX 요청을 하거나 변경해야 합니다.state.currentCategory값을 지정하고 업데이트 사이클을 완료합니다.
전체 코드는 다음과 같습니다(소스).
import React, { Component, Fragment } from 'react';
import axios from "axios";
class Post extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
category: null,
currentCategory: null
};
this._createMarkup = this._createMarkup.bind();
}
static getDerivedStateFromProps(props, state) {
if (props.category !== state.category) {
return {
category: props.category
};
}
return null;
}
componentDidMount() {
this._fetchData();
}
shouldComponentUpdate(nextProps, nextState) {
return this.state.currentCategory !== nextState.category;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
return prevState.currentCategory !== prevState.category;
}
componentDidUpdate(prevProps, prevState, dataDidFetch) {
// dataDidFetch is returned by getSnapshotBeforeUpdate
if (dataDidFetch) {
this.setState({
currentCategory: this.state.category
});
} else {
this._fetchData();
}
}
_fetchData() {
const category = this.state.category;
axios.get(`/some/api/endpoint?category=${category}`).then(posts => {
this.setState({
posts: posts.data
});
});
}
_createMarkup(html) {
return { __html: html };
}
render() {
return (
<Fragment>
{this.state.posts.map(post => (
<article className="post" key={post.id}>
<h2>{post.title.rendered}</h2>
<div dangerouslySetInnerHTML={this._createMarkup( post.content.rendered )} />
<p className="post-link">
<a href="{post.resource_link_url}">{post.resource_link_label}</a>
</p>
</article>
))}
</Fragment>
);
}
}
export default Post;
언급URL : https://stackoverflow.com/questions/30704585/when-should-reactjs-components-make-ajax-calls-to-update-state-from-props
'programing' 카테고리의 다른 글
| Haml에 인라인 자바스크립트를 어떻게 포함합니까? (0) | 2023.09.03 |
|---|---|
| node.js http와 함께 http 프록시를 사용하려면 어떻게 해야 합니까?고객님? (0) | 2023.09.03 |
| 깊이 1의 특정 커밋을 얕은 수준으로 복제하는 방법은 무엇입니까? (0) | 2023.08.29 |
| jQuery 클릭이 동적으로 생성된 항목에 대해 작동하지 않습니다. (0) | 2023.08.29 |
| 문자열 목록별 SQL 순서? (0) | 2023.08.29 |