React-admin 4.1.0中AutocompleteArrayInput设默认值后搜索失效咨询

问题原因 #

这是AutocompleteArrayInput搭配ReferenceArrayInput时，手动设置defaultValue引发的状态冲突，并非你的代码逻辑错误。

在react-admin中，ReferenceArrayInput会自动通过source属性从record中读取对应字段（此处为sector_industry_ids）作为默认值。而你通过useMemo生成的industries依赖record，当搜索操作触发组件重新渲染时，record可能发生细微变化（或组件重渲染触发useMemo重新计算），导致defaultValue被更新，进而重置了组件内部的已选值状态。

解决方案 #

方案1：移除手动设置的defaultValue（推荐） #

既然ReferenceArrayInput会自动从record的sector_industry_ids字段加载默认值，只需确保表单初始化时，record.sector_industry_ids已被正确赋值为你需要的默认值（比如从disclosure_template_sector_industries映射而来），无需手动设置defaultValue：

// 确保record.sector_industry_ids已在表单初始化时被正确赋值
<ReferenceArrayInput
   source="sector_industry_ids"
   reference="sector_industry"
   perPage={100}
>
      <AutocompleteArrayInput
        filterToQuery={(name) => ({ name })}
        validate={[required()]}
      />
</ReferenceArrayInput>

方案2：固定默认值的初始化时机 #

若确实需要手动指定默认值，为避免defaultValue随组件重渲染反复更新，改用useState在组件挂载时仅初始化一次：

import { useState } from 'react';

// 仅在组件挂载时计算一次默认值，不受后续record变化影响
const [defaultIndustries] = useState(() => 
  record.disclosure_template_sector_industries.map(item => item.sector_industry.id)
);

<ReferenceArrayInput
   source="sector_industry_ids"
   reference="sector_industry"
   perPage={100}
>
      <AutocompleteArrayInput
        filterToQuery={(name) => ({ name })}
        validate={[required()]}
        defaultValue={defaultIndustries}
      />
</ReferenceArrayInput>

为什么useMemo不可行？ #

useMemo的依赖是record，当搜索操作触发组件重渲染时，record可能因表单状态更新而变化，导致industries被重新计算，defaultValue随之更新，触发组件内部状态重置，最终清空已选值。

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