React useRef 与 useEffect 相结合，不渲染初始值

Question

我正在尝试呈现数组中的值列表，然后可以对其进行过滤以显示搜索结果。代码如下所示：

const { contacts, filteredContacts } = contactContext;
const contactsRef = useRef(contacts);
useEffect(() => {
if (filteredContacts !== null) {
contactsRef.current.value = filteredContacts;
} else {
contactsRef.current.value = contacts;
}
}, [filteredContacts]);
return (
<Fragment>
{contactsRef.current.value &&
contactsRef.current.value.map(contact => (
<ContactItem key={contact.id} contact={contact}></ContactItem>
))}
</Fragment>
);

当前行为该列表是仅当我在搜索框中键入某些内容时才呈现列表 - 因此更新filteredContacts值，而不是在初始呈现时。

预期行为应使用.current.value属性初始化contactsRef，并在加载组件时呈现。

我是新来的，所以请善待:)

Answer 1

它不起作用，因为您正在尝试映射 cotactsRef.current.value，这是未定义的，因为 contactsRef.current 的联系人不在值中。

而且您不应该将 ref 与 useEffect 一起使用，因为在 ref 中设置值不会触发重新渲染。只需使用变量来渲染哪些联系人。

const { contacts, filteredContacts } = contactContext;
const displayContacts = filteredContacts || contacts;
return (
<Fragment>
{displayContacts && displayContacts.map(contact => (
<ContactItem key={contact.id} contact={contact}></ContactItem>
))}
</Fragment>
);