React.js父组件属性变更时触发子组件重渲染问题求助

我是React.js新手，目前遇到一个问题：当传递给子组件的属性发生变更时，无法触发子组件的重渲染。参考相关问题的解决方案编写了示例，但问题仍未解决。本地路由测试中，切换页面后再返回包含该子组件的页面时，子组件会更新，但属性变更的当下并不会更新，只有通过页面导航强制重渲染才会生效。

现有代码 #

App.jsx #

import React from 'react';
import ChildTest from './ChildTest'

export function App(props) {

  const sets = { Setting1:"First" };

  setTimeout(() => {sets.Setting1 = "Second"; console.log("Timeout Called")}, 2000);
  setTimeout(() => { console.log(sets)}, 3000);

  return (
    <div className='App'>
        <ChildTest settings={sets} />
    </div>
  );
}

ChildTest.jsx #

import React, {useEffect, useState } from 'react';

export default function ChildTest({settings}) {
  
  const [value, setValue] = useState(settings.Setting1);
  
  useEffect(() => { setValue(settings.Setting1) }, [settings.Setting1]);

  return (
    <div>Hello: {value} </div>
  );
}

问题根源与解决方案 #

核心问题 #

React组件的重渲染触发条件是state或props的引用发生变化。你当前代码中，sets是一个普通对象，直接修改它的属性Setting1时，对象本身的引用并没有改变，所以父组件App不会触发重渲染，子组件自然也无法接收到更新后的props。

修正方案 #

1. 用useState管理状态：将sets改为React状态，通过setSets更新状态时返回新的对象，让React感知到变化：

import React, { useState } from 'react';
import ChildTest from './ChildTest'

export function App(props) {
  // 用useState初始化状态
  const [sets, setSets] = useState({ Setting1:"First" });

  setTimeout(() => {
    // 不可直接修改状态对象，需返回新对象
    setSets(prevState => ({...prevState, Setting1: "Second"}));
    console.log("Timeout Called")
  }, 2000);

  return (
    <div className='App'>
        <ChildTest settings={sets} />
    </div>
  );
}

2. 简化子组件（可选）：如果子组件不需要将props转为内部state，直接使用props即可，无需额外的useState和useEffect，这样更简洁且不易出错：

import React from 'react';

export default function ChildTest({settings}) {
  return (
    <div>Hello: {settings.Setting1} </div>
  );
}

当父组件通过setSets更新状态后，sets的引用发生变化，父组件会重渲染并将新的props传递给子组件，子组件随之更新显示最新值。

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