依次解开小吃店/吐司/通知

Question

我有一个包含多个字符串的数组，我想一个接一个地触发。触发数组中的第一项没有任何问题，但是之后完全失败。

例如this.props.toast = ['example 1', 'example 2', 'example 3']

我希望通知/小吃栏显示示例1，并在4750ms之后显示示例2，依此类推。

代码如下：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Text } from 'pk-ui-web';
import {
  FaBell,
} from 'react-icons/fa';
import { connect } from 'react-redux';
import './styles.css';
import { hideToast } from '../../redux/actions';

class Toaster extends Component {
  state = {
    show: false,
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.toast.length > 0) {
      this.triggerSnack();
    }
  }

  triggerSnack = () => {
    setTimeout(() => {
      this.setState({ show: true });
    }, 10);
    setTimeout(() => {
      this.setState({ show: false });
      this.props.hideToast() // removes first item in array
    }, 4750);
  }

  render() {
    const { toast } = this.props;
    const { show } = this.state;
    return (
      <div id={show ? 'toast-show' : 'toast'}>
        <div id="img"><FaBell /></div>
        <div id="desc">
          <Text override={{
            position: 'relative', bottom: '4px', margin: 0,
          }}
          >
            {toast[0]}
          </Text>
        </div>
      </div>
    );
  }
}

Toaster.propTypes = {
  toast: PropTypes.string.isRequired,
};

function mapStateToProps(state) {
  return {
    toast: state.toastReducer,
  };
}
const mapDispatchToProps = dispatch => ({
  hideToast: () => dispatch(hideToast()),
});


export default connect(mapStateToProps, mapDispatchToProps)(Toaster);