javascript - 不同父组件之间共享子组件不渲染？

Question

我有 2 个组件（/Dashboard 和 /WeeklyDashboard），它们有一个公共子组件（/Linegraph）。即使我将新道具从父组件传递给子组件，当路由发生变化时，它也不会使用提供的新数据进行更新。有没有办法解决这个问题。我尝试使用 componentDidUpdate 但是，它只会被调用当页面重新加载而不是当路由改变时

应用程序.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>

仪表板.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;

  

  

每周仪表板

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;

标签： javascriptreactjsreact-router