reactjs - 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 值，而不是在初始呈现时。

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

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

标签： reactjsreact-hooks

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>
  );