มีรหัสนี้อยู่ในใจ:

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

สถานะไม่ควรเปลี่ยนหลังจาก 3 วินาทีเท่านั้นหรือ? มันเปลี่ยนทันที

เป้าหมายหลักของฉันที่นี่คือการเปลี่ยนสถานะทุกๆ 3 วินาที (ด้วยsetInterval()) แต่เนื่องจากมันไม่ทำงานฉันจึงพยายามsetTimeout()ซึ่งก็ไม่ได้ผลเช่นกัน มีไฟอะไรไหม ขอบคุณ!

ทำ

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

มิฉะนั้นคุณจะผ่านผลมาจากการsetStatesetTimeout

คุณยังสามารถใช้ฟังก์ชันลูกศร ES6 เพื่อหลีกเลี่ยงการใช้thisคำสำคัญ:

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

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

ข้างต้นจะใช้งานได้เนื่องจากฟังก์ชันลูกศร ES6 ไม่เปลี่ยนบริบทของthis.

เมื่อใดก็ตามที่เราสร้างการหมดเวลาเราควรล้างมันบน componentWillUnmount หากยังไม่เริ่มทำงาน

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

ฉันรู้ว่านี่เก่าไปหน่อย แต่สิ่งสำคัญคือต้องสังเกตว่า React แนะนำให้ล้างช่วงเวลาเมื่อยกเลิกการต่อเชื่อมส่วนประกอบ: https://reactjs.org/docs/state-and-lifecycle.html

ดังนั้นฉันต้องการเพิ่มคำตอบนี้ในการสนทนานี้:

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

setStateจะถูกเรียกใช้ทันทีเนื่องจากวงเล็บ! รวมไว้ในฟังก์ชันที่ไม่ระบุตัวตนจากนั้นเรียกมันว่า:

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

คุณไม่ได้บอกว่าใครเรียก setTimeout

นี่คือวิธีที่คุณเรียกการหมดเวลาโดยไม่ต้องเรียกใช้ฟังก์ชันเพิ่มเติม

1. คุณสามารถทำได้โดยไม่ต้องสร้างฟังก์ชันเพิ่มเติม

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

ใช้function.prototype.bind ()

setTimeout ใช้ตำแหน่งของฟังก์ชันและเก็บไว้ในบริบท

2. อีกวิธีหนึ่งในการทำเช่นเดียวกันโดยการเขียนโค้ดแม้แต่น้อย

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

อาจใช้วิธีผูกแบบเดียวกันในบางจุด

setTimeout ใช้เฉพาะตำแหน่งของฟังก์ชันและฟังก์ชันมีบริบทอยู่แล้ว? อย่างไรก็ตามมันได้ผล!

หมายเหตุ: สิ่งเหล่านี้ใช้ได้กับฟังก์ชันใด ๆ ที่คุณใช้ใน js

ขอบเขตรหัสของคุณ ( this)จะเป็นwindowวัตถุของคุณไม่ใช่องค์ประกอบการตอบสนองของคุณและนั่นคือสาเหตุที่setTimeout(this.setState({position: 1}), 3000)ทำให้เกิดความผิดพลาดในลักษณะนี้

ที่มาจาก javascript not React เป็นการปิด js

ดังนั้นในการผูกขอบเขตองค์ประกอบปฏิกิริยาปัจจุบันของคุณให้ทำสิ่งนี้:

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

หรือหากเบราว์เซอร์ของคุณรองรับ es6 หรือ projs ของคุณรองรับการคอมไพล์ es6 ถึง es5 ให้ลองใช้ฟังก์ชัน arrow ด้วยเช่นกันเนื่องจาก arrow func คือการแก้ไขปัญหา "this":

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

มี 3 วิธีในการเข้าถึงขอบเขตภายในฟังก์ชัน 'setTimeout'

ประการแรก

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

ประการที่สองคือการใช้ฟังก์ชันลูกศร ES6 ทำให้ฟังก์ชันลูกศรไม่มีขอบเขต (สิ่งนี้)

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

ประการที่สามคือการผูกขอบเขตภายในฟังก์ชัน

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

คุณทำผิดพลาดในการประกาศไวยากรณ์ใช้การประกาศ setTimeout ที่เหมาะสม

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

พยายามใช้ไวยากรณ์ ES6 ของ set timeout javascript ปกติ setTimeout () จะไม่ทำงานใน react js

setTimeout(
      () => this.setState({ position: 100 }), 
      5000
    );