我需要使用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);