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'));

我想解析查询字符串，然后相应地传递数据，我注意到代码是运行两次。我用一个简单的警报来举例说明。

编辑：我挖得更深一点，显然问题不是因为我什么都不 return 而是因为我拿了一些东西。我更新了示例。

Answer 1

那是因为您没有将任何内容返回给 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")
);

Answer 2

虽然@Massimiliano 暗示了一个回应，但我 post 这个单独的答案是因为我觉得这个答案不完整。

在我在原始问题中提供的代码片段中，问题是我试图在呈现组件之前获取数据（我正在考虑将获取的数据作为参数传递给组件）。

正确的做法是渲染组件，然后从 React 组件的生命周期中使用 componentDidMount()。我在那里解析了查询字符串，获取数据并更新了状态（使用 this.setState()）。

正如 docs 所说，调用 componentDidMount() 将触发重新呈现，但它发生在浏览器首先呈现页面之前。因此，即使在幕后，用户也不会将其视为双重渲染。

我没有设法找出我无法在 <Route> 中获取数据的确切原因，但我上面描述的流程是我需要的正确方法。

React Route 内容触发两次

React Route content triggers twice

reactjs

react-router

react-router-v4