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

那是因为您没有将任何内容返回给Route组件进行渲染。试试这个：

for(int i = 0; i < 7; i++)
{

Answer 2

@Massimiliano暗示在回答周围时，我发布了这个单独的答案，因为我不觉得这个答案是完整的。

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

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

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

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

React Route内容触发两次

2 个答案: