ReactJS：setTimeout 在地图内无法渲染组件答案

【问题标题】：ReactJS: setTimeout not working inside map to render componentReactJS：setTimeout 在地图内无法渲染组件
【发布时间】：2018-06-07 16:59:52
【问题描述】：

我想在一段时间后渲染我的 ChatBubble 组件。但它不会返回我的组件。而是将数字 2 和 3 作为字符串返回。

const Conversation = ({data}) => {
  const { messages } = data;

  return (
    <div>
      {
        messages.map(data => {
          return setTimeout(() => {
            return <ChatBubble key={uniqid()} data={data}/>
          }, data.delay);
        })
      }
    </div>
  );
}

export default Conversation;

【问题讨论】：

How do I return the response from an asynchronous call?的可能重复
@jared 是的，对于 OP 来说绝对值得一读，但这对他解决这个特殊问题没有帮助。
@JonasW。嗯，你是对的。我收回了。

标签： javascript reactjs dictionary settimeout

【解决方案1】：

因为setTimeout 返回计时器的id。你不能只是返回一些东西来做出反应并期望一些魔法发生。相反，您可能需要这样的有状态组件：

class Conversation extends React.Component {
  constructor(props) {
    super(props);
    this.state = { messages: [] };
  }

  render() {
    return this.state.messages.map(data => (<ChatBubble {...data} />));
  }

  componentDidMount() {
     const {messages, delay} = this.props.data;
     this.interval = setInterval(() => {
       this.setState(prev => ({ messages: prev.messages.concat(messages.shift()) }));
       if(!messages.length) clearInterval(this.interval);
     }, delay);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }
}

【讨论】：