Mantine Select组件数据更新后选项不刷新怎么办？

小宝玲提问于 2026-02-09 13:27:26 阅读 38

框架

在用Mantine的Select组件时遇到了奇怪的问题，当通过API动态更新选项数据后，界面显示的选项列表完全没变：

我按照文档这样写的代码：


import { Select } from '@mantine/core';

function DynamicSelect({ initialData }) {
  const [data, setData] = useState(initialData);

  useEffect(() => {
    // 模拟异步更新数据
    setTimeout(() => {
      setData(['new', 'options']);
    }, 2000);
  }, []);

  return (
    <Select
      label="选择"
      data={data}
      placeholder="请选择"
    />
  );
}

两秒后控制台显示data状态确实变成了[‘new’, ‘options’]，但Select组件里的选项还是初始值。尝试过加key属性和用defaultValue都没用，难道是Mantine的Select有特殊更新机制？

我来解答赞 3 收藏

反馈

1 条解答

IT人天琪 Lv1

这个问题我遇到过，不是Mantine的锅，是你用法上有个小坑。Mantine的Select组件对data属性的更新是没问题的，但前提是data必须是全新引用。

你现在的写法setData(['new', 'options'])看起来没问题，但如果initialData本身就是个空数组或者简单数组，React可能认为这是相同引用，导致组件没触发重渲染。

解决方案很简单：确保每次更新都返回一个新数组引用。你可以这样改：

useEffect(() => {

  setTimeout(() => {

    setData([...['new', 'options']]); // 强制创建新引用

  }, 2000);

}, []);

更稳妥的方式是在API返回后直接展开：

setData(apiResponse.map(item => ({ value: item.id, label: item.name })));

另外检查一下你的initialData是不是也在变，如果是的话记得在useEffect依赖项里加上它。别搞什么key大法，治标不治本。

这问题和浏览器兼容没关系，纯属React状态更新的常见陷阱。记住一点：数组和对象要换内容，就得换引用。

2026-02-09 13:31