如何无需逐个使用map从过滤后的数组中提取各项数据

简化方案 #

首先，先列出你需要提取的所有字段：

const fields = ['name', 'email', 'address', 'cep', 'district', 'city', 'state', 'phone', 'sex'];

接着用reduce方法一次性生成所有字段对应的数组，替代重复的map操作：

const { responsible } = useResponsible()
const [ids, setIds] = useState([])

// 给过滤结果加兜底，避免undefined调用map报错
const filteredResponsible = responsible?.filter((resp) => ids.includes(resp.id)) || [];

// 批量生成各字段的数组
const responsibleFields = fields.reduce((acc, field) => {
  acc[field] = filteredResponsible.map(resp => resp[field]);
  return acc;
}, {});

现在responsibleFields对象里就包含了responsibleFields.name、responsibleFields.email等所有你需要的数组，不用再逐个写map。

最后赋值时，直接遍历字段列表批量调用setValue：

useEffect(() => {
  fields.forEach(field => {
    // 和你原来的`${responsibleName}`逻辑一致，把数组转为字符串
    setValue(field, `${responsibleFields[field]}`);
  });
}, [filteredResponsible, setValue]);

额外注意 #

• 你原来代码里const { filteredResponsible } = useResponsible是错误的，filteredResponsible是自己通过filter计算的，不是从useResponsible Hook解构来的，需要修正。
• useEffect依赖项要加上filteredResponsible，确保过滤结果变化时输入框值能同步更新。

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