Question

我有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;

不同父组件之间的共享子组件未呈现？

0 个答案: