0
私は反応する初心者です。私はthis questionを読むが、私の問題は解決しなかった。私はcomponentWillReceivePropsの理解に間違っていると思う。私のコンポーネントと、それは親のこのようなものです: 親:反応レンダリングメソッドが2回呼び出され、URLが変更されます
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>);
}
}
とindex.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"を2回書き込む。なぜ私は理解できないのですか?
2つのレンダリングで 'props'がどう違うのか確認しましたか? – Scarysize
@Scarysizeの両方で、小道具のidの値は同じです。 – sahar
@sahar他の小道具はいかがですか?あなたは 'console.log(props)'だけを試しましたか? – Waiski