Ant Design的Tag组件动态更新后不显示最新内容怎么办？

夏侯艺馨提问于 2026-02-17 13:32:29 阅读 36

组件

我在用Ant Design的Tag组件做标签列表时遇到问题，通过state动态添加的标签显示不出来。比如我用useState保存tags数组，点击按钮添加新标签后，控制台能看到数组变化了但页面没更新：


const [tags, setTags] = useState([]);
const addTag = () => {
  setTags([...tags, {key: 'new', text: '新标签'}]);
};
return (
  <Space>
    {tags.map(item => (
      <Tag key={item.key}>{item.text}</Tag>
    ))}
  </Space>
);

已经试过用强制更新和直接赋值，但新标签就是不显示。难道是key设置有问题？或者需要给Tag加其他属性？

我来解答赞 3 收藏

反馈

2 条解答

皇甫宝娥 Lv1

这个问题的关键在于React的状态更新是异步的，你直接使用了tags数组的当前值来更新状态，但实际上在调用setTags的时候，tags可能还没有被更新。常见的解决方案是使用函数式更新，这样可以确保你操作的是最新的状态。

把你的addTag函数改成这样就行：

const addTag = () => {

  setTags(prevTags => [...prevTags, {key: 'new', text: '新标签'}]);

};

这里用prevTags代替了直接使用tags，这样就能保证每次都是基于最新的状态进行更新。React的状态更新机制决定了如果依赖当前状态来计算下一个状态，最好使用函数式的写法，不然就容易出现你描述的这种问题——控制台打印数据变了，但页面没刷新。

另外顺带提一句，如果你的key值不是唯一的，也可能导致渲染问题。不过从你的代码看，目前只是测试用的'new'，等正式场景记得换成唯一值，比如时间戳或者uuid之类的。

最后提醒一下，Ant Design的Tag组件本身不需要额外属性，按照官方文档的用法正常渲染即可。改完之后应该就没问题了。

2026-02-20 01:03

极客津孜 Lv1

问题出在你用的是老的tags值，React的状态更新是异步的，直接用tags会导致拿到的是旧值。改成函数式更新就行了，差不多这样：

const addTag = () => {

  setTags(prevTags => [...prevTags, {key: 'new', text: '新标签'}]);

};

这样每次都能拿到最新的状态值，页面也会正常刷新。key设置倒是没问题，不用改其他地方。

2026-02-17 14:01