Boa noite. Estou com dúvidas sobre tal método do ciclo de vida do React e estou fazendo testes. Um deles, é cancelar uma requisição fetch, no entanto, não estou conseguindo. O console.log aparece, mas o cancelamento da requisição não funciona. Na minha aplicação, ao clicar no botão, acontece uma troca de componentes e ocorre uma requisição. Aqui vai meu código:
const abortController = new AbortController()
class App extends Component {
constructor(props) {
super(props);
this.state = {
load: true
};
}
toogle = () => {
const { load } = this.state;
this.setState({ load: !load });
};
render(){
const { load } = this.state
return(
<>
{
load?
<>
<h1>Principal</h1>
<button onClick={this.toogle}>Clique</button>
</>:
<Teste click={this.toogle}/>
}
</>
)
}
}
class Teste extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log("fui montado");
fetch('https://pokeapi.co/api/v2/evolution-chain/?limit=6&offset=0',{
signal: abortController.signal
}).then(res => res.json()).then(res => console.log(res))
}
componentWillUnmount() {
console.log("fui desmontado");
abortController.abort()
}
render(){
return(
<>
<h1>Requisição</h1>
<button onClick={this.props.click}>Clique</button>
</>
)
}
}
Alguém tem alguma ideia do que possa estar acontecendo?
Desde já, agradeço a atenção!
setState
após a requisição se o componente estiver sido desmontado?