使用来自其他子组件的数据更新 React 中的子组件

问：

我是 React 的新手，现在正在尝试解决一些问题，但不知何故无法理解 React 的渲染过程。 我有三个组件：1 个父组件，2 个子组件。

父组件称为“GaStructuresApp”。 子组件 1 称为“DropdownTreeSelect”。 子组件 2 称为“关键字”。

GaStructuresApp 通过 useEffect（） 钩子从外部系统接收数据，并通过 “DropdownTreeSelect” 组件上的 useState 设置接收到的数据。 现在，我可以通过该子组件中的结构进行导航，并选择不同的值（通过复选框）。该复选框中的每个值都有子元素。但是，这些子元素应该出现在自己的 div 中的“DropdownTreeSelect”组件旁边。 为此，我有一个“关键字”组件，它通过道具接收所选项目的子元素。因此，我还通过useEffect（）为该组件设置了值。 这也很好用。但是，现在“DropdownTreeSelect”组件再次折叠，并且不检查任何内容。这可能是因为所有内容都再次重新渲染。 我不希望“DropdownTreeSelect”在单击复选框时重新呈现。我只希望“关键字”组件重新渲染，因为该组件收到了新的道具。

以下是一些代码（混淆了要点）：

“GaStructuresApp”：

export default function GaStructuresApp() {

    const [keywordsAll, setKeywords] = useState([]);

...

    function onChange(currentNode, selectedNodes) {

        keywordsAll.splice(0, keywordsAll.length);
        setKeywords([...keywordsAll]);


        selectedNodes.forEach(node => {
            if (node.checked === true) {
                if (node.kids.length > 0) {
                    getChildrenValues(node);
                }
                else {
                    node.keywords?.forEach(keyword => {
                        keywordsAll.push(keyword);

                        setKeywords([...keywordsAll]);
                    })
                }
            }
        })

        buildPaths(selectedNodes);
    }

...

return(<> <div className={"dropdown"}><DropdownTreeSelect data={data} onChange={onChange} showDropdown={"always"}/> </div> <Keywords keywords={keywordsAll}/> </>)

“关键词”：

import React from 'react';

export default function Keywords ({keywords}) {

    return (
        <div className={"keywordsBox"}>
            <ul>
                {keywords.map((keyword) => (
                    <li id={keyword.id}>
                        {keyword.value}
                    </li>
                ))}
            </ul>
        </div>


    );
}