https://openweathermap.org/에서 기상 데이터를 가져 오는 컨테이너 구성 요소가 있습니다. 그런 다음 컨테이너 구성 요소는 해당 상태 데이터를 프레젠테이션 구성 요소로 공급합니다.특정 구성 요소가 React 구성 요소에서 정의되지 않았습니다.
일부 주 속성이 있지만 프레젠테이션 구성 요소에서는 다른 것들은 정의되지 않습니다. 타임 아웃에서 랩핑하면 표시됩니다.
왜 이런지가 있었는지 찾고 있었지만 컨테이너 구성 요소에서 가져 와서 프레젠테이션 구성 요소로 전달한 후 정의되지 않은 이유를 찾을 수 없었습니다.
CodePen : 표현 적 컨테이너 구성 요소에 대한 https://codepen.io/ZCKVNS/pen/wpGaMe?editors=0010가
기사 : https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 당신은 단지 규칙으로, 당신은 데이터를받을 때까지 App
에서 null
을 반환하거나, 수
const App = data => {
setTimeout(() => {
console.log('clouds', data.data.clouds.all); //defined
console.log('lat',data.data.coord.lat); //defined
console.log('lon', data.data.coord.lon); //defined
}, 100);
return (
<div>
{ data.data.clouds.all } <!-- Not defined -->
</div>
);
}
class AppContainer extends React.Component {
constructor() {
super();
this.state = { data: {} };
}
componentDidMount() {
fetch('https://api.openweathermap.org/data/2.5/weather?zip=43055,us&appid=4e08bb16c8936bd92b4780f9e2cdf00f')
.then(res => res.json())
.then(data => this.setState({ data }));
}
render() {
return React.createElement(App, { data: this.state.data });
}
}
ReactDOM.render(
<AppContainer />,
document.getElementById('container')
);
처음으로 구성 요소를 렌더링 할 때 가져 오기가 완료되지 않았기 때문입니다. – Li357
좋아요, 그래서 가져 오기가 완료 될 때까지 렌더링을 지연시킬 수 있다고 생각합니까? 귀하의 회신에 감사드립니다. – ZCKVNS