React中如何多次渲染同一组件并保证各组件状态独立？

两个组件选中状态同步和组件实例是否独立无关，本质是你把两个组件的选中值、更新逻辑全部绑定到了父组件的同一份状态上：

• 两个Component1接收的name属性都取自同一个状态值names[selected].name
• 两个组件选中选项时调用的是同一个状态更新方法，修改的是父组件里同一份状态
• 加不同固定key的方案无效，是因为key仅在React做虚拟DOM diff时用来标记节点身份，只有key变化时才会触发组件卸载重挂；固定key不会让组件重建，就算强制重建，只要传入的props还是绑定同一份父状态，渲染结果依然会同步。

另外你的原有代码还存在两处逻辑问题：

• setNames是更新整个姓名列表的方法，不应该作为下拉选中项的更新回调传入
• Component1内部遍历names渲染选项，但并没有从props接收names参数

根据你是否需要在父组件感知两个选择器的选中值，选对应方案即可：

方案1：选中状态仅组件内部使用（父组件不需要感知选中值） #

把选中值状态、关联数据请求逻辑全部下沉到Component1内部维护，父组件只需要传入公共的姓名列表即可，两个组件的状态天然隔离。
Component1 实现代码：

const Component1 = ({ names }) => {
  // 每个组件实例自己维护独立的选中状态、关联数据
  const [selectedName, setSelectedName] = useState('')
  const [relatedInfo, setRelatedInfo] = useState(null)

  const handleSelect = async (e) => {
    const currentName = e.target.value
    setSelectedName(currentName)
    // 请求当前选中姓名关联的年龄、位置等数据
    const data = await fetchRelatedDataByName(currentName)
    setRelatedInfo(data)
  }

  return (
    <div>
      <StyledSelect ml="10px" onChange={handleSelect} value={selectedName}>
        {names.map(({ name }) => (
          <option key={name} value={name}>
            {name}
          </option>
        ))}
      </StyledSelect>
      {/* 此处渲染relatedInfo对应的年龄、位置等内容 */}
    </div>
  )
}

父组件Main实现代码：

const Main = () => {
  const [names, setNames] = useState([])
  // 公共姓名列表可在此处初始化请求
  return (
    <>
      <Component1 names={names} />
      <Component1 names={names} />
    </>
  )
}

方案2：父组件需要获取两个选择器的选中值（比如做对比逻辑） #

不要用单个selected状态存选中值，在父组件分开维护两个选择器对应的独立状态，分别传给对应组件即可。
父组件Main实现代码：

const Main = () => {
  const [names, setNames] = useState([])
  // 分开存储两个组件各自的选中值
  const [firstSelectName, setFirstSelectName] = useState('')
  const [secondSelectName, setSecondSelectName] = useState('')

  // 关联数据请求逻辑可以放在父组件统一处理，也可以下沉到Component1内部
  return (
    <>
      <Component1
        names={names}
        name={firstSelectName}
        setName={setFirstSelectName}
      />
      <Component1
        names={names}
        name={secondSelectName}
        setName={setSecondSelectName}
      />
    </>
  )
}

这种写法下两个组件修改的是各自独立的状态，不会互相干扰，同时父组件也能随时拿到两个选择器的选中值做后续业务逻辑。

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