Mając na uwadze ten kod:

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')
);

Czy stan nie powinien się zmieniać dopiero po 3 sekundach? To się zmienia natychmiast.

Moim głównym celem jest tutaj zmiana stanu co 3 sekundy (z setInterval()), ale ponieważ nie działała, próbowałem setTimeout(), która też nie działa. Jakieś światła na tym? Dzięki!

Robić

setTimeout(
    function() {
        this.setState({ position: 1 });
    }
    .bind(this),
    3000
);

W przeciwnym razie przekazujesz wynik setStatedo setTimeout.

Możesz także użyć funkcji strzałek ES6, aby uniknąć użycia thissłowa kluczowego:

setTimeout(
  () => this.setState({ position: 1 }), 
  3000
);

setTimeout(() => {
  this.setState({ position: 1 });
}, 3000);

Powyższe działałoby również, ponieważ funkcja strzałki ES6 nie zmienia kontekstu this.

Za każdym razem, gdy tworzymy limit czasu, powinniśmy wyczyścić go na componentWillUnmount, jeśli jeszcze nie został uruchomiony.

      let myVar;
         const Component = React.createClass({

            getInitialState: function () {
                return {position: 0};    
            },

            componentDidMount: function () {
                 myVar = setTimeout(()=> this.setState({position: 1}), 3000)
            },

            componentWillUnmount: () => {
              clearTimeout(myVar);
             };
            render: function () {
                 return (
                    <div className="component">
                        {this.state.position}
                    </div>
                 ); 
            }

        });

ReactDOM.render(
    <Component />,
    document.getElementById('main')
);

Wiem, że jest to trochę stare, ale ważne jest, aby zauważyć, że React zaleca wyczyszczenie interwału po odinstalowaniu komponentu: https://reactjs.org/docs/state-and-lifecycle.html

Więc chciałbym dodać tę odpowiedź do tej dyskusji:

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

setStatejest wywoływana natychmiast z powodu nawiasów! Owiń to w anonimową funkcję, a następnie nazwij ją:

setTimeout(function() {
    this.setState({position: 1})
}.bind(this), 3000);

Nie powiedziałeś, kto dzwonił do setTimeout

Tutaj możesz wywołać limit czasu bez wywoływania dodatkowych funkcji.

1. Możesz to zrobić bez wykonywania dodatkowych funkcji.

setTimeout(this.setState.bind(this, {position:1}), 3000);

Używa function.prototype.bind ()

setTimeout przyjmuje lokalizację funkcji i utrzymuje ją w kontekście.

2. Innym sposobem, aby zrobić to samo, nawet pisząc jeszcze mniej kodu.

setTimeout(this.setState, 3000, {position:1});

Prawdopodobnie w pewnym momencie używa tej samej metody wiązania

SetTimeout przyjmuje tylko lokalizację funkcji, a funkcja ma już kontekst? W każdym razie działa!

UWAGA: Działają one z każdą funkcją używaną w js.

Zasięg kodu ( this) będzie twoim windowobiektem, a nie komponentem reagowania, i dlatego setTimeout(this.setState({position: 1}), 3000)ulegnie awarii w ten sposób.

To pochodzi z javascript, a nie z React, jest to zamknięcie js

Tak więc, aby powiązać obecny zakres komponentu React, wykonaj następujące czynności:

setTimeout(function(){this.setState({position: 1})}.bind(this), 3000);

Lub jeśli twoja przeglądarka obsługuje es6 lub twoje projs obsługują kompilację es6 do es5, wypróbuj również funkcję strzałki, ponieważ strzałka func ma rozwiązać ten problem:

setTimeout(()=>this.setState({position: 1}), 3000);

Istnieją 3 sposoby uzyskania dostępu do zakresu wewnątrz funkcji „setTimeout”

Pierwszy,

const self = this
setTimeout(function() {
  self.setState({position:1})
}, 3000)

Po drugie, użyj funkcji strzałkowej ES6, ponieważ funkcja strzałkowa nie miała swojego zakresu (to)

setTimeout(()=> {
   this.setState({position:1})
}, 3000)

Trzecim jest powiązanie zakresu wewnątrz funkcji

setTimeout(function(){
   this.setState({position:1})
}.bind(this), 3000)

Wystąpił błąd w deklaracji składni, użyj właściwej deklaracji setTimeout

message:() => { 
  setTimeout(() => {this.setState({opened:false})},3000); 
  return 'Thanks for your time, have a nice day 😊! 
}