저는 React를 처음 접했고 Promise에서 데이터를 가져 오는 올바른 방법이 궁금했습니다.
변수에서 값을 fruits가져 오려고하는데 console.log ()가 두 번 나타납니다 .
다음은 데이터의 예입니다.
const fruits = [
{
id: '1',
name: 'apple'
},
{
id: '2',
name: 'banana'
}
]
const fruits$ = new Promise((resolve, reject) => setTimeout(resolve, 100, fruits))
내가 시도한 것은 다음과 같습니다.
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
data: []
}
}
render() {
console.log(this.state.data)
return (
<p>Hello</p>
);
}
componentDidMount() {
fruits$
.then((response) => {
this.setState({
data: response
})
})
}
}
변수와 .then()올바른 방법을 직접 호출하고 있습니까? 대안이 있습니까?
예, 이것이 올바른 방법이지만 약속이 거부 될 가능성도 처리해야합니다 . (물론 귀하의 예제는 거부 될 수 없지만 아마도 귀하의 예제는 더 복잡한 것의 단순화 된 버전 일 것입니다.)
구성 요소가 먼저 빈 상태 속성으로 렌더링 된 다음 상태 속성을 업데이트 할 때 다시 렌더링되기 때문에에 대한 console.log두 번의 호출이 있기 때문에에 대한 두 번의 호출이 표시됩니다 . 이를 방지하는 유일한 방법은 구성 요소의 부모에서 약속을 처리하고 props를 통해이 구성 요소에 데이터를 전달하여 데이터를 사용할 수있을 때까지 구성 요소를 전혀 렌더링하지 않는 것입니다.renderdatadata
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다