在React中，当父组件状态改变时，重新呈现子组件

Question

我对React还很陌生，所以我很抱歉，如果这有一个简单的答案。我试图在页面顶部的一个栏重新渲染每次URL的变化(与React路由器)。在与这个问题斗争了一段时间之后(如果你有任何更简单的解决方案，请告诉我!)，我决定在URL发生变化时更新状态，并将这个新状态传递给组件。下面是代码的简化版本:

import React from 'react';
import {
AppBar, Toolbar, Typography
} from '@material-ui/core';
import './TopBar.css';
class TopBar extends React.Component {
constructor(props) {
super(props);
this.state = {
url: props.url
}
this.parseURL = this.parseURL.bind(this);
}


static getDerivedStateFromProps(props, state) {
if (state.url !== props.url) {
return {
url: props.url
}
}
return null;
}
render() {
return (
<AppBar position="absolute">
<Toolbar>
<Typography variant="h5" color="inherit">
{this.state.url}
</Typography>
</Toolbar>
</AppBar>
);
}
}

export default TopBar;

import React from 'react';
import ReactDOM from 'react-dom';
import {
HashRouter, Route, Switch
} from 'react-router-dom';
import {
Grid, Typography, Paper
} from '@material-ui/core';
import './styles/main.css';
import TopBar from './components/topBar/TopBar';
import UserDetail from './components/userDetail/userDetail';
import UserPhotos from './components/userPhotos/userPhotos';
class PhotoShare extends React.Component {
constructor(props) {
super(props);
this.state = {
url: window.location.href
}
}
render() {
return (
<HashRouter>
<div>
<Grid container spacing={8}>
<Grid item xs={12}>
<TopBar url={this.state.url} key={this.state} />
</Grid>

<Grid item sm={9}>
<Paper className="cs142-main-grid-item">
<Switch>
<Route path="/users/:userId"
render={ props => {
this.state.url = props.match.params.userId;
console.log(this.state.url);
return <UserDetail {...props}
key={props.match.params.userId} />;} }
/>
<Route path="/photos/:userId"
render={ props => {
this.state.url = props.match.params.userId;
console.log(this.state.url);
return <UserPhotos {...props}
key={props.match.params.userId} />;} }
/>
</Switch>
</Paper>
</Grid>
</Grid>
</div>
</HashRouter>
);
}
}

ReactDOM.render(
<PhotoShare />,
document.getElementById('photoshareapp'),
);

当我点击链接时，console.log语句显示PhotoShare组件中的url状态正在改变，但TopBar组件在改变时不会重新呈现。有什么方法可以确保它重新渲染吗?谢谢你的帮助!

Answer 1

几句话:

不要使用状态作为TopBar的键，在PhotoShare的render中，
React键应该是简单的字符串。
您可以简单地使用"TopBar"作为键。
无论如何，它是一个单子&甚至可能不需要键。

不要在TopBar构造函数中使用props.url(将其保留为null &让getDerivedStateFromProps完成它的工作。

我想知道访问window.location.href是否是一个副作用。也许，可以在componentDidMount中尝试setState(window.location.href)，而不是在构造函数中初始化它。

永远不要使用this.state.foo =设置状态。应该使用setState方法。不确定React路由器，但你不能在render方法中更新状态。

请参阅使用react-router检测路由变化以获得更好的解决方案。