如何解决不同父组件之间的共享子组件未呈现?
我有2个组件(/ Dashboard和/ WeeklyDashboard),并且它们有一个公共子组件(/ Linegraph)。 即使我从父级组件向子级组件传递了新的props时路线发生变化,它也不会使用提供的新数据进行更新。有什么办法可以解决这个问题。我尝试使用componentDidUpdate,但只能被调用当页面重新加载时而不是在路由更改时
App.js
render() {
return (
<div className="Main">
<div className="SearchGroup">
<div>
<SearchBar />
<NavBar />
<div>
</div>
</div>
</div>
<Switch>
<Route path="/" component={() => <Dashboard WeatherDetails={this.state.ResponseDetails} WeatherDetails2={this.state.ResponseDetails1} WeatherDetails3={this.state.ResponseDetails2} />} exact />
<Route path="/Weekly" component={() => <WeeklyDashboard/>} exact />
</Switch>
</div>
Dashboard.js
const HourlyTemp=this.props.WeatherDetails3;
return (
<div className="Graph">
<LineGraph HourlyTemp={HourlyTemp}/>
</div>
);
LineGraph.js
import React from "react";
class LineGraph extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidUpdate(prevProps) {
alert("hi");
}
render() {
console.log(this.props);
for (var key in this.props.HourlyTemp) {
if (key < 16) {
var toStr = convert(this.props.HourlyTemp[key].dt).toString();
var temp = {
name: toStr,Temperature: this.props.HourlyTemp[key].temp,};
data1.push(temp);
}
}
return (
<div>
<LineChart
width={800}
height={400}
data={data1}
margin={{
top: 5,right: 30,left: 20,bottom: 5,}}
>
<CartesianGrid strokeDasharray="0 0" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="Temperature"
stroke="orange"
activeDot={{ r: 8 }}
/>
<Line type="monotone" dataKey="Temperature" stroke="orange" />
</LineChart>
</div>
);
}
}
export default LineGraph;
WeeklyDashboard
function WeeklyDashboard(props) {
var a = [1,2,3,4,5,6,7];
return (
<div style={{ margin: "auto",width: "80%" }}>
<div className="WeeklyContainer">
{a.map(function (x,key) {
return (
<div>
<Weekly key={key} />
</div>
);
})}
</div>
<div style={{ margin: "auto",width: "fit-content" }}>
<LineGraph key={"ss"} HourlyTemp={"ss"} />
</div>
</div>
);
}
export default WeeklyDashboard;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。