React嵌套组件新增项后未自动重新渲染问题求助

核心问题 #

• 子组件状态未同步props：Component组件内部通过useState(props.component)初始化状态，但React的useState仅在组件首次挂载时使用传入的props值，后续父组件传递的component props更新时，子组件的component状态不会自动同步，导致界面无法渲染新数据。
• 代码语法与逻辑错误：
  • filter函数中comm为未定义变量，应为comp；
  • 数据结构中使用subcomps存储子项，但代码中误用了replies字段；
  • forEach无需await修饰，它不支持异步操作；
  • ComponentsList未声明loading状态，会引发运行报错；
  • filteredComponents初始状态为undefined，首次渲染时map方法会报错。

修复步骤 #

1. 移除子组件内部的冗余状态 #

Component组件无需维护独立的component状态，直接使用props即可，确保父组件数据更新时子组件自动重新渲染：

function Component(props) {
    const component = props.component;
    return (
        <div>
            {component.id}; {component.name};
            <ul>
                {component.subcomps?.map((comp) =>
                    <li key={comp.id} style={{ textAlign: 'left' }}>
                        <Component component={comp} />
                   </li>)}
            </ul>
        </div>
    );
}

2. 修正ComponentsList中的错误 #

• 新增并初始化loading状态；
• 修正变量名与数据字段名；
• 移除不必要的await；
• 初始化filteredComponents为空数组；
• 通过深拷贝保证状态更新的不可变性，避免直接修改原状态对象。

修正后的ComponentsList代码：

function ComponentsList(props) {
    const newComponents = props.newComponents;
    const [filteredComponents, setFilteredComponents] = useState([]);
    const [loading, setLoading] = useState(false);

    function deepSearch(collection, key, value, path=[]) {
        for (const o of collection) {
          for (const [k, v] of Object.entries(o)) {
            if (k === key && v === value) {
              return {path: path.concat(o), object: o};
            }
            if (Array.isArray(v)) {
              const _o = deepSearch(v, key, value, path.concat(o));
              if (_o) {
                return _o;
              }
            }
          }
        }
      }

    function filter() {
        // 深拷贝原状态，避免直接修改原对象
        const temp = JSON.parse(JSON.stringify(filteredComponents));
        newComponents.forEach((comp) => {
            const parentTuple = deepSearch(temp, 'id', comp.parentId);
            if (!parentTuple) {
                // 未找到父组件时，直接添加到根列表
                temp.push(comp);
            } else {
                const parent = parentTuple.object;
                // 正确使用subcomps字段，保持不可变性
                parent.subcomps = [...(parent.subcomps || []), comp];
            }
        })
        setFilteredComponents(temp);
    }

    useEffect(() => {
        setLoading(false);
      }, [filteredComponents]);
    
      useEffect(() => {
        if (!newComponents.length) return;
        setLoading(true);
        filter();
      }, [newComponents]);

    return (<>
        {loading ? <div>加载中...</div> : (
            <ul>
                {filteredComponents.map((component) =>
                    <li key={component.id}>
                        <Component component={component} />
                    </li>
                )}
            </ul>
        )}
    </>);
}

3. 其他优化点 #

• 使用component.id作为列表项的key，而非index，避免列表项顺序变化时的渲染异常；
• 用可选链操作符?.替代&&，简化空值判断逻辑；
• 针对简单数据结构，使用JSON.parse(JSON.stringify())实现深拷贝，确保状态变化能被React检测到。

完整修正代码 #

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

function Component(props) {
    const component = props.component;
    return (
        <div>
            {component.id}; {component.name};
            <ul>
                {component.subcomps?.map((comp) =>
                    <li key={comp.id} style={{ textAlign: 'left' }}>
                        <Component component={comp} />
                   </li>)}
            </ul>
        </div>
    );
}

function ComponentsList(props) {
    const newComponents = props.newComponents;
    const [filteredComponents, setFilteredComponents] = useState([]);
    const [loading, setLoading] = useState(false);

    function deepSearch(collection, key, value, path=[]) {
        for (const o of collection) {
          for (const [k, v] of Object.entries(o)) {
            if (k === key && v === value) {
              return {path: path.concat(o), object: o};
            }
            if (Array.isArray(v)) {
              const _o = deepSearch(v, key, value, path.concat(o));
              if (_o) {
                return _o;
              }
            }
          }
        }
      }

    function filter() {
        const temp = JSON.parse(JSON.stringify(filteredComponents));
        newComponents.forEach((comp) => {
            const parentTuple = deepSearch(temp, 'id', comp.parentId);
            if (!parentTuple) {
                temp.push(comp);
            } else {
                const parent = parentTuple.object;
                parent.subcomps = [...(parent.subcomps || []), comp];
            }
        })
        setFilteredComponents(temp);
    }

    useEffect(() => {
        setLoading(false);
      }, [filteredComponents]);
    
      useEffect(() => {
        if (!newComponents.length) return;
        setLoading(true);
        filter();
      }, [newComponents]);

    return (<>
        {loading ? <div>加载中...</div> : (
            <ul>
                {filteredComponents.map((component) =>
                    <li key={component.id}>
                        <Component component={component} />
                    </li>
                )}
            </ul>
        )}
    </>);
}

const items = [
    { id: 1, name: 'sample1', subcomps: [{ id: 5, name: 'subcomp1', parentId: 1, subcomps: [] }] },
    {
        id: 2, name: 'sample2', subcomps: [
            { id: 6, name: 'subcomp2', subcomps: [], parentId: 2 },
            { id: 7, name: 'subcomp3', subcomps: [], parentId: 2 }
        ]
    },
]

ReactDOM.render(<ComponentsList newComponents={items} />, document.querySelector("#app"))

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