Esse erro é de uma regra do ESLint: Enforce consistent usage of destructuring assignment of props, state, and context (react/destructuring-assignment).
Em tradução livre, esta regra serve para ter um uso consistente do estado (state), das props e do contexto (context) através da desestruturação. Para corrigir o erro, você pode:
- Obedecer a regra:
render() {
const { time } = this.state; // Você já tinha essa linha no código
return (
<div>
<h1>
Hora
{time} {/* Aqui você usa `time` ao invés de `this.state.time` */}
</h1>
</div>
);
}}
Nota: Se você tentar fazer const time = this.state.time
terá o erro novamente, pois não estará acessando via desestruturação.
- Desabilitar a regra no seu arquivo
eslintrc
ou nas configurações do ESLint no package.json, assim a regra não será mais aplicada em nenhum lugar:
"rules": {
"react/destructuring-assignment": ['off']
}
Esta é uma regra para consistência no código. Deixar a regra habilitada fará com que você e seu time acessem à variáveis da mesma maneira (com a desestruturação). Deixar a regra desabilitada não trará penalidades ao seu código do tipo "estou fazendo algo errado", apenas não forçará uma consistência.
Portanto, qualquer uma das duas opções acima são válidas e a preferência por uma ou outra parte do desenvolvedor e do consenso da equipe.