如何更新React组件状态：同步表单子Tag组件选中态

你现在写的代码存在双状态源不同步的问题：
父组件ContactForm已经用tags数组存了所有选中的标签，子组件Tag又单独在内部维护了一个isClicked状态存单个标签的选中状态。两份状态各管各的，根本不需要这么做——React的状态本来就应该单向流动，父组件才是这个场景下的唯一可信状态持有者，根本不需要你“把状态变更传给Tag”，直接把选中态作为props传给Tag就行。

具体改法 #

• 删掉Tag组件内部没用的isClicked本地状态：这个状态要表达的“是否被选中”信息，父组件完全已经掌握了，让子组件再存一遍纯属冗余
• 给Tag组件新增isSelected属性，你可以直接基于这个属性做样式切换、交互反馈等所有逻辑
• 父组件渲染每个Tag的时候，直接判断当前标签是否在已选的tags数组里，把计算好的布尔值通过isSelected传进去就行——只要父组件的tags数组更新，所有Tag的选中态会自动同步刷新，完全不需要额外的跨组件状态传递逻辑

改造后的参考代码 #

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

// Tag 组件不再维护自身选中状态，所有状态从父组件单向传入
const Tag = ({ value, onClick, isSelected, children }) => {
  // 可直接根据传入的 isSelected 做选中态样式切换，比如高亮、描边等
  const selectedStyle = isSelected 
    ? { background: '#1677ff', color: '#fff', borderRadius: '4px' } 
    : {};
  return (
    <div style={selectedStyle} onClick={onClick}>
      <span>{children || value}</span>
    </div>
  );
};

// 静态标签配置提到组件外部，避免每次组件渲染都重复创建
const TAG_OPTIONS = [
  { key: '1', title: 'Tag 1' },
  { key: '2', title: 'Tag 2' },
  { key: '3', title: 'Tag 3' },
];

const ContactForm: FunctionComponent = () => {
  const [selectedTags, setSelectedTags] = useState<string[]>([]);

  const handleTagClick = (title: string) => {
    // 用*函数式状态更新*的写法，避免闭包拿到旧的state值导致操作失效
    setSelectedTags(prevTags => {
      return prevTags.includes(title) 
        ? prevTags.filter(tag => tag !== title) 
        : [...prevTags, title]
    })
  }

  return (
    <>
      {TAG_OPTIONS.map(({ key, title }) => {
        // 直接基于父组件已有的selectedTags，计算单个标签的选中态传给子组件
        const isTagSelected = selectedTags.includes(title);
        return (
          <Tag 
            key={key} 
            isSelected={isTagSelected}
            onClick={() => handleTagClick(title)}
          >
            {title}
          </Tag>
        );
      })}
    </>
  );
};

export default ContactForm;

代码里的小问题修正 #

• 原点击逻辑里的setState改成了函数式更新写法，解决因为React状态异步更新、闭包缓存旧值导致的状态更新失效问题
• 原数组渲染时用index当key的问题：直接用静态配置里自带的唯一key值当列表key，避免后续列表动态调整时出现渲染错位
• 原Tag组件内部div上写的key={key}属于冗余代码：key是React做列表diff的专属标记，只需要写在map循环返回的最外层元素/组件上，组件内部的普通元素不需要加key

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