React开发：如何向子组件传递更新后的数据并触发子组件重渲染

• 你用普通对象存储动态数据的方案确实存在问题：React函数组件只有自身管理的响应式状态变更时才会触发重渲染，普通对象不属于React管控的状态，修改它的属性不会触发父组件重渲染，子组件的props自然不会更新。
• 就算其他逻辑触发了父组件重渲染，你定义在函数体内的tempData每次都会被重新初始化为初始空值，永远无法保留更新后的数据。

把普通对象替换为React的useState状态来管理，修改值的时候调用set方法触发父组件重渲染，子组件就能同步拿到最新的props：

import { useState } from 'react';

const Parent = () => {
  // 用useState存储动态数据，成为响应式状态
  const [tempData, setTempData] = useState({
    location: "",
    weather: "",
    temperature: "",
  });

  // 你原来拉取数据更新tempData的逻辑需要改成调用setTempData
  // 示例：拉取到新数据后更新状态的写法
  const fetchAndUpdateData = async () => {
    const res = await 你的拉取数据接口();
    setTempData(prev => ({
      ...prev, // 保留不需要修改的原有属性
      ...res // 覆盖需要更新的属性
    }))
  }

  return (
    <>
      <System onChange={(value) => urlHandler(value)} />
      <City onChange={(value) => setCity(value)} />
      <Data
        location={tempData.location}
        weather={tempData.weather} // 注意你原有代码这里误传了tempData.location，属于笔误可以同步修正
        temperature={tempData.temperature}
      />
    </>
  );
};

const Child = (props) => {
  return(
    <>
      <div>location: {props.location}</div>
      <div>temperature: {props.temperature}</div>
    </>
  )
};

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