当前位置: 首页 > 知识库问答 >
问题:

react render方法被调用两次,更改url

卫和洽
2023-03-14

我是个新手。我读了这个问题,但没有解决我的问题。我认为我对组件的理解是错误的。我的组件及其父组件如下所示:父组件:

import React from 'react';
import { Router, Route, Link } from 'react-router';

export default class App extends React.Component {

items = [
    {id: 1086, title: 'MENU1'},
    {id: 1083, title: 'MENU2'},
    {id: 1093, title: 'MENU3'}]

renderItems = ()=> {
    return this.items.map((item, index)=> {
        let url = 'content/' + item.id;
        return (<li key={index}><Link to={url} activeClassName="active">{item.title}</Link></li>);
    });
}


render() {
    return (
        <div>
            <h1 style={{textAlign:'center'}}>My First React App</h1>
            <ul className="nav nav-pills nav-justified">{this.renderItems()}</ul>
            {this.props.children}
        </div>
    );
}

}

孩子:

import React, { Component } from 'react';
import UmContent from './UmContent'
import $ from 'jquery';
import ProgressBar from 'progressbar.js';


export default class UmContentContainer extends Component {
state = {
    data: ''
}

firstInitial = true;

componentDidMount() {
    if (this.firstInitial) {
        let props = this.props;
        this.sendRequestToServer(props);
        this.firstInitial = false;
    }
}

sendRequestToServer = (props)=> {
    if (!props || !props.params || !props.params.id) {
        return;
    }
    let itemId = props.params.id;
    let that = this;
    this.setState({data: itemId});
     }

componentWillReceiveProps(props, states) {
    this.sendRequestToServer(props);
     console.log(props.params.id);
}

render() {
    return (
        <div className="col-md-12">
            <h1>{this.state.data}</h1>
        </div>);
}

}

和索引。js:

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link,hashHistory } from 'react-router'
import App from './App';
import UmContentContainer from './Umbreco/UmContentContainer';

render((
<Router history={hashHistory}>
    <Route path="/" component={App}>
            <Route path="/content/:id" component={UmContentContainer} />
    </Route>
</Router>
), document.getElementById('root'))

首次安装后,控制台写入"id"两次。我不明白为什么?

共有1个答案

皮景龙
2023-03-14

我在这里找到了我的答案,我错了,实际上是关于哈希历史和推送新网址。

 类似资料:
  • 问题内容: 我在Go中关注一个简单的Web服务器示例。 我插入了一条语句,使生成的代码如下所示: 问题是,每当我在Web浏览器中加载端口8000时,此函数就会被调用两次。这是一个问题,因为我打算在每次页面访问时增加一个计数器。通过这种行为,计数器将增加两次。OTOH,如果我这样做,它只会被调用一次。 我觉得我在这里失踪真的很愚蠢。 问题答案: 只需记录请求。您将意识到您的浏览器还请求/favico

  • 我注意到我的bean在jar中的spring boot应用程序上一次调用的和两次。下面是两次初始化的示例bean。 和被调用两次: 从日志中,PostConconfit首先被调用: 第二个是: @Scheduled被调用了两次一次: 当我删除时,和只被调用了一次。我非常确定类只有一个实例。

  • 问题内容: 我正在使用带有ItemListener的JComboBox。更改值后,itemStateChanged事件将被调用两次。第一次调用,ItemEvent显示所选的原始项目。第二次显示正在由用户选择的项目。这是一些测试器代码: 因此,当我将组合框从“一个”更改为“三个”时,控制台显示: 我有没有办法告诉我使用ItemEvent,它是第二个项目(即用户选择的项目)?如果有人可以解释为什么两次

  • 问题内容: 我在python中遇到了一个奇怪的错误,其中将类的方法用作工厂会导致实例化类的方法被调用两次。 最初的想法是使用母类的方法根据所传递的参数返回其孩子之一的特定实例,而不必在类外声明工厂函数。 我知道使用工厂功能将是在此处使用的最佳设计模式,但是在项目的这一点上更改设计模式将非常昂贵。因此,我的问题是:在这种模式中,是否有办法避免重复调用而仅获得单个调用? 任何帮助,不胜感激。 问题答案

  • 我将Ionic3与一个一起使用。我有下面的函数,出于某种原因,即使该函数只被调用一次,第三行也会被触发两次。 问题 这引起了一个问题,因为正在获取第二个订阅的值,并且第一个订阅丢失,不允许我取消订阅。 问题 如何创建一个只有一个订阅的

  • 在我的应用程序中,我将TextWatcher放在EditText上。当我更改EditText的文本时,TextWatcher的事件会被调用两次。 我正在使用模拟器来运行应用程序。