Reactコメントコンポーネント-リストに新しく追加されたコメントコンポーネントをターゲットにして、このコンポーネントのみで関数を実行します

新しいコメントが追加されたときにトリガーされるコメント編集タイマーを作成しようとしています。ボタンが削除される前に、60秒間「編集」ボタンが表示されます（The Vergeがコメントで行うのと同様）。

Comments後にAPI呼び出しを行い、コンポーネントのcomponentDidMount()リストをレンダリングするCommentコンポーネントがあります（コメントオブジェクトをcomment: []状態に追加CommentFormすることにより、ユーザーが新しいコメントを送信できるようにするコンポーネントもあります。

コメントが正常に送信されると、API呼び出しは完全なコメントオブジェクトを返し、それを既存のコメント状態配列の前に追加します。またnewCommentId、新しいコメントIDで状態を更新し、startEditTimerブール状態をtrueに設定します。

postCommentSuccess = (res) => {
  const newArray = this.state.comments.slice(0);
  newArray.splice(0, 0, res.data);
  this.setState({
    comments: newArray,
    newCommentId: res.data.id,
    startEditTimer: true,
  });
}

コメントのリストを次のようにレンダリングします...

render() {
  if (this.state.comments.length) {
    commentsList = (this.state.comments.map((comment) => {
      const { id } = comment;
      return (
        <Comment
          key={id}
          id={id}
          newCommentId={this.state.newCommentId}
          startEditTimer={this.state.startEditTimer}
        />
      );
    }));
  }

  return (
    <ul className="comments-list">
      {commentsList}
    </ul>
  );
}

私のCommentコンポーネントでは、startEditTimerpropがtrueに設定されているかどうかを確認してから、startEditTimer()関数を実行しています。

componentWillReceiveProps(nextProps) {
  if (nextProps.startEditTimer === true) {
    this.startEditTimer();
  }
}

startEditTimer = () => {
  this.setState({ editTimer: 60 });
  setInterval(this.countdown, 1000);
}

countdown = () => {
  this.setState({ editTimer: this.state.editTimer -= 1 });
}

リターン関数では、次のように編集ボタンを表示/非表示にしています。

render() {
  return (
    <li className="comment">
      {this.props.id === this.props.newCommentId &&
        this.state.editTimer > 0 &&
        <button onClick={this.editReply} className="edit-btn">Edit ({this.state.editTimer})</button>
      }
    </li>
  );
}

これはある程度機能し、編集ボタンは投稿されたときに新しいコメントに表示されますが、カウントダウンタイマーは60秒続きません。代わりに、0.5秒ごとに1つ減っているようです。これはstartEditTimer()、新しいコメントが追加されたときに、関数が1回だけではなく複数回実行されていることが原因である可能性があるため、新しく追加されたコメントに対してのみ関数を実行する方法が必要だと思います。