Tendo este código em mente:
var Component = React.createClass({
getInitialState: function () {
return {position: 0};
},
componentDidMount: function () {
setTimeout(this.setState({position: 1}), 3000);
},
render: function () {
return (
<div className="component">
{this.state.position}
</div>
);
}
});
ReactDOM.render(
<Component />,
document.getElementById('main')
);
O estado não deveria mudar somente após 3 segundos? Está mudando imediatamente.
Meu objetivo principal aqui é mudar o estado a cada 3 segundos (com setInterval()
), mas como não estava funcionando, tentei setTimeout()
, mas também não está funcionando. Alguma luz acesa? Obrigado!
javascript
reactjs
Jbarradas
fonte
fonte
foo(bar())
entãobar
é executado primeiro e seu valor de retorno é passado parafoo
.foo()
aqui é exatamente para executarbar
após o tempo limite desejado. Ou estou completamente errado e ele executa na hora, e só retorna valor após o tempo desejado?bar
, não chamar e passar seu valor de retorno. Você esperava que o comportamento defoo(bar())
mudasse, dependendo do quefoo
está acontecendo? Isso seria muito estranho.Respostas:
Faz
Caso contrário, você está passando o resultado de
setState
parasetTimeout
.Você também pode usar as funções de seta ES6 para evitar o uso de
this
palavras-chave:fonte
setTimeout(() => {this.setState({ position: 1 })}, 3000)
@PositiveGuy não tenho certeza se você pesquisou isso por conta própria desde que esta questão foi postada, mas caso não o tenha feito: o exemplo original de Daniel precisa.bind(this)
restringir othis
contexto parasetState
- caso contrário ,this
irá se referir automaticamente ao contexto no qual ele é chamado (neste caso, o anônimofunction
sendo passadosetTimeout
). As funções de seta ES6, no entanto, têm escopo léxico - elas se restringemthis
ao contexto no qual são chamadas.O acima também funcionaria porque a função de seta ES6 não altera o contexto de
this
.fonte
this
.Sempre que criarmos um tempo limite, devemos limpá-lo no componentWillUnmount, se ainda não tiver disparado.
fonte
Eu sei que isso é um pouco antigo, mas é importante notar que o React recomenda limpar o intervalo de desmontagem do componente: https://reactjs.org/docs/state-and-lifecycle.html
Então, eu gosto de adicionar esta resposta a esta discussão:
fonte
setState
está sendo invocado imediatamente devido ao parêntese! Envolva-o em uma função anônima e chame-o:fonte
Você não disse quem chamou setTimeout
Aqui está como você chama o tempo limite sem chamar funções adicionais.
1. Você pode fazer isso sem criar funções adicionais.
Usa function.prototype.bind ()
setTimeout pega a localização da função e a mantém no contexto.
2. Outra maneira de fazer o mesmo escrevendo ainda menos código.
Provavelmente usa o mesmo método de ligação em algum ponto
O setTimeout leva apenas a localização da função e a função já tem o contexto? Enfim, funciona!
NOTA: Funcionam com qualquer função usada no js.
fonte
Seu escopo de código (
this
) será seuwindow
objeto, não seu componente de reação, e é por issosetTimeout(this.setState({position: 1}), 3000)
que travará dessa maneira.Isso vem de javascript não React, é js closure
Portanto, para vincular o escopo do componente de reação atual, faça o seguinte:
Ou se o seu navegador suportar es6 ou seu projs tiver suporte para compilar es6 a es5, tente a função de seta também, pois a função de seta é para corrigir 'este' problema:
fonte
Existem 3 maneiras de acessar o escopo dentro da função 'setTimeout'
Primeiro,
A segunda é usar a função de seta ES6, porque a função de seta não tinha escopo próprio
O terceiro é vincular o escopo dentro da função
fonte
Você fez um erro de declaração de sintaxe, use a declaração setTimeout adequada
fonte