如何使用setTimeout运行地图功能?

时间:2019-08-16 13:57:33

标签: reactjs settimeout map-function

我需要使用setTimeout运行map函数,以在渲染函数之后延迟2000ms。

我使用了setTimeout(###我在这里放置了地图功能###,2000),但是它不起作用。 延迟渲染功能中某些内容的最佳方法是什么? 在reactJs中渲染时如何使用setTimeout?

重复 我需要使用setTimeout运行map函数,以在渲染函数之后延迟2000ms。

我使用了setTimeout(###我在这里放置了地图功能###,2000),但是它不起作用。 延迟渲染功能中某些内容的最佳方法是什么? 在reactJs中渲染时如何使用setTimeout?

import React,{Component} from "react";
import TypeMessage from './typeMessage';
import {connect} from "react-redux";

 class MainContent extends Component{
     constructor(props){
         super(props);
         this.state={
             count:0,
             questions:[]
         }
     }

    addMessage=(message)=>{

        console.log( "inputtan gelen message",message);
        message.keyId = Math.random();
        this.props.dispatch({type:"SAVE_MESSAGE",typeMessage:message});

    }


    moreCount=()=>{
        console.log("more count tıklandı");
        this.setState(prevState=>({
            count:prevState.count+1
        }));
    }

    _nextQuestion=()=>{
        this.setState(prevState=>({
            count:prevState.count+1
        }));


        Object.entries(this.props.saveFormQuestions).map(([key, value], i) => {

                //if(key===this.state.count.toString() && value.type==='control_fullname'){
                    return (
                        this.setState(prevState=>({
                            questions:prevState.questions.concat(value)
                        }))

                    );
            })
    }



render(){
    let sendSomething="Main contentten type message'e mesaj gönderildi";
    return(
        <div className="mainContainer">
            <h3 className="text-center">Jotform ChatBot</h3>
        <div className="messaging">
            <div className="inbox_msg">

                <div className="mesgs">
                    {
                        //////////MESSAGE FIELD////////////////*\
                    }

                    <div className="msg_history">
                        <div className="outgoing_msg">
                        <div className="outgoing_msg_img"> <img src="jot_pencil.png"
                                    alt="pencil"/>
                            </div>
                            <div className="sent_msg">
                                <p>
                                    How Can I help you? Would you like to fullfill the form?
                                    <input type="button"value="Yes" onClick={this._nextQuestion}/>
                                    <input type="button"value="No"/>
                                    </p>
                                <span className="time_date"> 11:01 AM | June 9</span>
                            </div>
                        </div>
                        {
                          /* I need to delay this area  */
                            setTimeout(
                            this.state.questions.map(item=>{

                                if(item.type==='control_fullname' && item.order===this.state.count.toString()){
                                    return(
                                        <div className="incoming_msg" key={item.qid}>
                                            <div className="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png"
                                                    alt="sunil"/>
                                            </div>
                                            <div className="received_msg">
                                                <div className="received_withd_msg">
                                                    <p>{item.type}</p>
                                                    <p>

                                                    </p>
                                                    <span className="time_date"> 11:01 AM | June 9</span>
                                                </div>
                                            </div>
                                        </div>
                                    )}else{
                                        return(<div style={{display:'none'}}>We dont find any questions in your form</div>);
                                    }


                            }),2000)
                        }        
                         {
                            //User sent messages

                            this.props.saveMessage.map(message=>{
                                return (
                                <div className="incoming_msg" key={message.keyId}>
                                <div className="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png"
                                        alt="sunil" />
                                </div>
                                <div className="received_msg">
                                    <div className="received_withd_msg">
                                    <p>Your answer.</p>
                                        <p>
                                            {message.content}
                                        </p>
                                        <span className="time_date"> 11:04 AM | June 9</span>
                                    </div>
                                </div>
                            </div>);
                            })
                        }

                    </div>

                    <TypeMessage message={sendSomething} addMessage={this.addMessage} moreCount={this.moreCount}/>

                    {
                        //////////MESSAGE FIELD////////////////*\
                    }
                </div>
            </div>
        </div>
        </div>
        );
        }
}
const mapStateToProps=state=>({
    formId:state.formId,
    apiKey:state.apiKey,
    saveMessage:state.saveMessage,
    saveFormQuestions:state.saveFormQuestions
})

export default connect(mapStateToProps)(MainContent);

0 个答案:

没有答案