从其他组件关闭MessageBar Office-UI-fabric

Question

类似的问题也被问过，但不是一样的。Ref1：How we can close the error messagebar of office react fabric component? Ref2：Office ui fabric panel won't close

不过，我的问题如下。我通过reduce和push在父组件中添加MessageBars。我已经将_onDismiss移到了parent，当我用鼠标点击“close”按钮时，我正在索引正确的MessageBar。但是我如何既将其从数组中移除又将其关闭呢？

编辑:我已经设法从数组中删除了，也从web上的列表中删除了。唯一的问题是，我仍然保留最后添加的状态(来自MessageList的父级)。我正在做一个修复来删除最后一个元素。

额外的问题:如何将计时器添加到信息和成功，而不是错误？

我不得不从map更改为reduce，因为我的代码被大量重复所占据，因为我没有从数组中删除。如果我和前面的stackoverflow帖子做同样的事情，那么所有相同的内容都会被删除。

allFeedback是一个对象数组，其中包含返回给用户的消息，并键入'error‘、'success’或'info‘

父级：

export def......
  super(); 
    this.state = {
      containerRef: React.createRef(),
      allFeedback: [],
    }
  } 

  _onDismiss = (index) => (ev) =>   {
    const allFeedback = this.state.allFeedback;
    allFeedback.splice(index, 1);
    allFeedback.pop();
    this.setState({ allFeedback });
  }

  <Portal>
    <MessageBox ref={this.state.containerRef}>
      {allFeedback.reduce((result, current, index) => {
        if (index < 15) {
          result.push(
            <Message 
             key={index}
             index={index} 
             message={current.message} 
             type={current.type}
             _onDismiss={this._onDismiss}
           />
         );
       }
      return result;
    }, [])}
    {/* Commented out code that breaks code with lots of repeats
      allFeedback.map((entry, index) => { 
        return <Message 
                 key={index} 
                 message={entry.message} 
                 type={entry.type} 
                />
        })
    */}
  </MessageBox>
</Portal>

子组件对于所有组件都是相同的，但检查不同，以确定要添加到屏幕上的组件。

{type === info ? (
  <StackItem>
    <MessageBar
      onDismiss={_onDismiss(index)}
      dismissButtonAriaLabel="Close"
    >
      {message}
    </MessageBar>
  </StackItem>
) : null}

当我按下“关闭”按钮时，我被期望删除它，同时也从数组中删除它。但由于我不能这样做-我被困在3-4次点击后循环上升到30。这也是我在代码中添加if的原因。但是当我要添加一个计时器的时候，最好也让计时器把它从数组中删除。

编辑:我已经设法从数组中删除了_onDismiss下的代码

Answer 1

已解决

为了删除重复项，我检查了一下，这样它就不会通过两次。

  componentDidUpdate(prevProps, prevState) {
    if(this.props.feedback.message !== prevProps.feedback.message) {
      this.state.allFeedback.push(this.props.feedback)
    }
  }

这使得_onDismiss犯了一个错误，所以我只是清理了它

  _onDismiss = (index) => () =>   {
    const allFeedback = this.state.allFeedback;
    allFeedback.splice(index, 1);
    this.setState({ allFeedback });
  }