React重构谷歌天气应用：父组件更新类组件props问题咨询

嘿，我明白你遇到的问题了——在React里直接修改props是行不通的，因为props是只读的，组件没法自己改动父组件传过来的props。咱们得用React的状态管理思路来解决这个问题，核心是把「选中日期的状态」提升到App组件，然后通过props把状态传递给主区域组件，实现数据驱动视图更新。

下面是具体的解决方案步骤：

1. 在App组件中添加选中日期的状态 #

不管你用的是类组件还是函数组件，都需要在App里维护一个「选中日期数据」的状态，用来存储用户点击的日期对应的天气信息。

函数组件版本（推荐） #

import { useState } from 'react';

function App() {
  // 初始化选中状态，默认可以设为第一个日期或者null
  const [selectedDateData, setSelectedDateData] = useState(null);
  // 假设你的日期天气数据存在这个数组里
  const dateWeatherList = [
    { date: '10/01', temp: '22℃', desc: '晴' },
    { date: '10/02', temp: '25℃', desc: '多云' },
    // ...更多日期数据
  ];

  // 修改你的handleSelectionAt方法：更新状态而非props
  const handleSelectionAt = (dateIndex) => {
    // 根据索引获取选中的日期数据
    const selectedData = dateWeatherList[dateIndex];
    // 更新状态，React会自动触发重新渲染
    setSelectedDateData(selectedData);
  };

  return (
    <div className="app-container">
      {/* 日期选择组件：把点击事件和数据传过去 */}
      <DateSelector 
        onDateSelect={handleSelectionAt} 
        dates={dateWeatherList.map(item => item.date)} 
      />
      {/* 带红边框的主区域：传入选中的日期数据 */}
      <MainWeatherPanel selectedData={selectedDateData} />
    </div>
  );
}

类组件版本 #

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedDateData: null,
      dateWeatherList: [
        { date: '10/01', temp: '22℃', desc: '晴' },
        { date: '10/02', temp: '25℃', desc: '多云' },
      ]
    };
    // 绑定this，避免回调里的指向问题
    this.handleSelectionAt = this.handleSelectionAt.bind(this);
  }

  handleSelectionAt(dateIndex) {
    const selectedData = this.state.dateWeatherList[dateIndex];
    // 用setState更新状态，这是React类组件更新状态的唯一正确方式
    this.setState({ selectedDateData: selectedData });
  }

  render() {
    return (
      <div className="app-container">
        <DateSelector 
          onDateSelect={this.handleSelectionAt} 
          dates={this.state.dateWeatherList.map(item => item.date)} 
        />
        <MainWeatherPanel selectedData={this.state.selectedDateData} />
      </div>
    );
  }
}

2. 主区域组件根据props渲染内容 #

接下来修改你的带红边框主区域组件（比如上面的MainWeatherPanel），让它接收selectedData作为props，并根据这个数据渲染对应的天气信息：

// 函数组件版本
function MainWeatherPanel({ selectedData }) {
  // 如果还没选中日期，显示提示
  if (!selectedData) {
    return <div style={{border: '2px solid red', padding: '20px'}}>请选择一个日期查看天气</div>;
  }

  return (
    <div style={{border: '2px solid red', padding: '20px'}}>
      <h3>{selectedData.date} 天气</h3>
      <p>温度：{selectedData.temp}</p>
      <p>状况：{selectedData.desc}</p>
      {/* 其他需要展示的天气信息 */}
    </div>
  );
}

// 类组件版本
class MainWeatherPanel extends React.Component {
  render() {
    const { selectedData } = this.props;
    if (!selectedData) {
      return <div style={{border: '2px solid red', padding: '20px'}}>请选择一个日期查看天气</div>;
    }
    return (
      <div style={{border: '2px solid red', padding: '20px'}}>
        <h3>{selectedData.date} 天气</h3>
        <p>温度：{selectedData.temp}</p>
        <p>状况：{selectedData.desc}</p>
      </div>
    );
  }
}

核心思路总结 #

• 状态提升：把「选中日期」这个共享状态放到父组件（App）中，这样日期选择器和主区域组件都能基于这个状态协同工作。
• props只读：永远不要尝试修改组件自身的props，要通过更新父组件的状态来传递新的props，触发子组件重新渲染。
• 数据驱动视图：当用户点击日期时，App的状态更新，React会自动把新的selectedData传给主区域组件，主区域就会渲染对应的内容了。

内容的提问来源于stack exchange，提问作者Chandler