如何从筛选数组中获取每个项目，而不使用每个项目的映射

Question

我正在取一个数组并在上下文中过滤值:

const { responsible } = useResponsible()
const [ids, setIds] = useState([])
const filteredResponsible = responsible?.filter((resp) =>
ids.includes(resp.id)
)

问题是我需要做一个映射来得到每个id对应的值，一个接一个。这最终会使代码太长:

const { filteredResponsible } =  useResponsible
const responsibleName =  filteredResponsible.map((resp) => resp.name)
const responsibleEmail =  filteredResponsible.map((resp) => resp.email)
const responsibleAddress =  filteredResponsible.map((resp) => resp.address)
...
And so on with each item in the array.

我使用React Hook Form的setValue来设置输入中的值:

useEffect(() => {
setValue('name', `${responsibleName}`)
setValue('email', `${responsibleEmail}`)
setValue('address', `${responsibleAddress}`)
setValue('cep', `${responsibleCep}`)
setValue('district', `${responsibleDistrict}`)
setValue('city', `${responsibleCity}`)
setValue('state', `${responsibleState}`)
setValue('phone', `${responsiblePhone}`)
setValue('sex', `${responsibleSex}`)
}, [])

我怎样才能把这些地图变小?不需要创建一个映射来获取数组中的每个项目?

Answer 1

似乎没有任何理由在每次渲染上做这些map调用，并在任何地方做它们，而不是在你需要它们的地方，因为你只显示使用仅挂装效果的结果。就在那里做:

const { filteredResponsible } = useResponsible; // Is there really no `()` needed here?
useEffect(() => {
setValue("name", `${filteredResponsible.map(({name}) => name)}`);
setValue("email", `${filteredResponsible.map(({email}) => email)}`);
setValue("address", `${filteredResponsible.map(({address}) => address)}`);
// ...
}, []);

如果你真的需要那些不同的数组在每次渲染，除非你可以改变你的数据结构，以更适应你的输出，我不认为你有很多选择。至少可以通过filteredResponsible:

避免多次循环。

const { filteredResponsible } =  useResponsible; // ()?
const responsibleName = [];
const responsibleEmail = [];
const responsibleAddress = [];
for (const { name, email, address } of filteredResponsible) {
responsibleName.push(name);
responsibleEmail.push(email);
responsibleAddress.push(address);
}

如果真的是这样的话，你可能要避免在每次渲染时都这样做:

const { filteredResponsible } = useResponsible; // ()?
const { responsibleName, responsibleEmail, responsibleAddress } = useMemo(() => {
const responsibleName = [];
const responsibleEmail = [];
const responsibleAddress = [];
for (const { name, email, address } of filteredResponsible) {
responsibleName.push(name);
responsibleEmail.push(email);
responsibleAddress.push(address);
}
return { responsibleName, responsibleEmail, responsibleAddress };
}, [filteredResponsible]);