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

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

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

我是新来的反应者，所以请客气：）

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

React useRef与useEffect结合使用不会呈现初始值

1 个答案: