Контент React Route срабатывает дважды

Question

Почему это предупреждение срабатывает дважды?

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter as Router, Route} from 'react-router-dom'

ReactDOM.render(
    <Router>
        <Route path="" render={props => {
            fetch('some_path').then(response => response.json)
                .then(data => {
                    alert("i show up twice!");
                    return <p>something</p>
                });
    </Router>
, document.getElementById('root'));

Я хочу проанализировать строку запроса и затем передать данные соответствующим образом, и я заметил, что код запускается дважды.Я проиллюстрировал это простым предупреждением.

РЕДАКТИРОВАТЬ: Я копнул немного глубже, и, очевидно, проблема не в том, что я ничего не возвращаю, а в том, что я что-то получаю.Я обновил пример.

Answer 1

Хотя @Massimiliano намекнул на ответ, я публикую этот отдельный ответ, потому что я не думаю, что он завершен.

В фрагменте кода, который я предоставил в исходном вопросе, проблема заключалась в том, что я пыталсяизвлекать данные перед рендерингом компонента (я думал о том, чтобы передать извлеченные данные в виде параметров в компонент).

Правильный способ сделать это - визуализировать компонент и затем использовать componentDidMount() из жизненного цикла реагирующего компонента.,Там я проанализировал строку запроса, извлек данные и обновил состояние (используя this.setState()).

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

Мне не удалось выяснить, почему я не могу получить данные в <Route>, но в потокея описал выше, это правильный подход к тому, что мне нужно.

Answer 2

Это потому, что вы ничего не возвращаете компоненту Route для рендеринга.Попробуйте это:

   ReactDOM.render(
  <Router>
    <Route
      path=""
      render={props => {
        fetch("some_path")
          .then(response => response.json)
          .then(data => {
            alert("i show up twice!");
            return <p>something</p>;
          });
        return <p>something</p>;
      }}
    />
  </Router>,
  document.getElementById("root")
);