当单个组件更新时，同步更新多组件中的FieldName

核心逻辑很简单：让左右面板共享同一个响应式的数据源，修改右侧表单的字段名时直接更新数据源中对应项的值，左侧列表基于数据源渲染，就能自动同步显示最新内容。

具体实现步骤 #

• 把dataList放在父组件或者全局状态管理工具中作为共享状态，确保左右组件都能访问到
• 右侧表单修改FieldName时，找到dataList中对应id的项，更新它的字段名：

  // React示例：更新选中项的字段名
  const handleFieldNameChange = (newName) => {
    setDataList(prevList => 
      prevList.map(item => 
        item.id === selectedId ? {...item, fieldName: newName} : item
      )
    );
  };
  
  // Vue示例：直接修改响应式数据
  const handleFieldNameChange = (newName) => {
    const targetItem = dataList.find(item => item.id === selectedId);
    if (targetItem) targetItem.fieldName = newName;
  };
  

• 左侧列表组件始终基于dataList渲染每一项的字段名，只要数据源是响应式的，框架会自动触发列表的重新渲染，显示更新后的名称

注意事项 #

• 必须保证dataList是响应式数据：如果用原生JS开发，需要手动监听数据变化并调用列表的渲染方法；如果用React、Vue这类框架，直接使用框架的状态管理即可
• 不要直接修改原数组/对象的属性（比如React中要返回新数组），否则框架可能检测不到数据变化，导致列表不更新

界面布局说明：左侧为展示多个字段项的列表面板，右侧为显示选中项详情的表单区域，表单包含一个可编辑的FieldName输入框

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