Компонент делает бесконечные звонки на сервер при нажатии на маршрут

Question

Компонент моего общего приложения реакции также отображает компонент при нажатии на связанный элемент моего компонента. При щелчке по нему происходит много (бесконечных) обращений в мою базу данных для получения информации для заполнения нового компонента.

Я пытался сделать аксиос вместо обычной выборки в вызовах. Я пытался ограничить время рендеринга в установленном состоянии.

Компонент боковой панели

<Router>
    <div id = "left-sidebar">
    <h3> Previous Posts </h3>
    { this.sidebar_feed() }
    <Route path='/post/:title' component={Page} />
    </div>
</Router>

Функция компонента Page, вызываемая при подключении.

getPost = () => {
    let postSearchTitle = this.props.match.params.title;
    console.log(this.state.text);
      fetch("/api/getPost/" + postSearchTitle)
         .then(data => data.json())
         .then(response => this.setState({
         title: response.post.title,
         text: response.post.text.split("\n")
        }));
    };

API на стороне сервера

router.get("/getPost/:title", function(req, res) {
    let title  = req.params.title;
    PostModel.findOne({title: title}, function (err, resp) {
        if (err) return console.log('error: ' + err);
        return res.json({post: resp});
    });
    console.log("Attempted " + ++localCount);
});

Когда вы нажимаете на сообщение, страница должна перерисовываться, и сообщение должно присутствовать. Пока что он рендерит много раз и не загружает реальный текст.

EDIT: Код жизненного цикла

componentDidMount() {
     this.getPost();
     if (!this.state.intervalIsSet) {
      let interval = setInterval(this.getPost, 1000);
      this.setState({ intervalIsSet: interval });
     }
}