3.5 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d403617d | Usare il metodo del ciclo di vita componentDidMount | 6 | 301422 | use-the-lifecycle-method-componentdidmount |
--description--
La maggior parte degli sviluppatori web, a un certo punto, deve chiamare un'API endpoint per recuperare i dati. Se stai lavorando con React, è importante sapere dove eseguire questa azione.
La migliore pratica con React è quella di effettuare chiamate API o qualsiasi chiamata al server nel metodo del ciclo di vita componentDidMount()
. Questo metodo viene chiamato dopo che un componente è stato montato nel DOM. Qualsiasi chiamata a setState()
qui attiverà un re-rendering del tuo componente. Quando chiami un'API in questo metodo, e imposti il tuo stato con i dati che l'API restituisce, si attiverà automaticamente un aggiornamento una volta che i dati saranno ricevuti.
--instructions--
C'è una chiamata API finta in componentDidMount()
. Essa imposta lo stato dopo 2.5 secondi per simulare la chiamata a un server per recuperare i dati. Questo esempio richiede il numero di utenti attivi per un sito. Nel metodo render, presenta il valore di activeUsers
nell'h1
dopo il testo Active Users:
. Guarda cosa succede nell'anteprima e sentiti libero di cambiare il timeout per vedere i diversi effetti.
--hints--
MyComponent
dovrebbe mostrare un elemento div
che contiene un tag h1
.
assert(
(() => {
const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
return (
mockedComponent.find('div').length === 1 &&
mockedComponent.find('h1').length === 1
);
})()
);
Lo stato del componente dovrebbe essere aggiornato con una funzione timeout in componentDidMount
.
assert(
(() => {
const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
return new RegExp('setTimeout(.|\n)+setState(.|\n)+activeUsers').test(
String(mockedComponent.instance().componentDidMount)
);
})()
);
Il tag h1
dovrebbe presentare il valore activeUsers
dallo stato di MyComponent
.
(() => {
const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
const first = () => {
mockedComponent.setState({ activeUsers: 1237 });
return mockedComponent.find('h1').text();
};
const second = () => {
mockedComponent.setState({ activeUsers: 1000 });
return mockedComponent.find('h1').text();
};
assert(new RegExp('1237').test(first()) && new RegExp('1000').test(second()));
})();
--seed--
--after-user-code--
ReactDOM.render(<MyComponent />, document.getElementById('root'));
--seed-contents--
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
activeUsers: null
};
}
componentDidMount() {
setTimeout(() => {
this.setState({
activeUsers: 1273
});
}, 2500);
}
render() {
return (
<div>
{/* Change code below this line */}
<h1>Active Users: </h1>
{/* Change code above this line */}
</div>
);
}
}
--solutions--
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
activeUsers: null
};
}
componentDidMount() {
setTimeout(() => {
this.setState({
activeUsers: 1273
});
}, 2500);
}
render() {
return (
<div>
<h1>Active Users: {this.state.activeUsers}</h1>
</div>
);
}
}