Question

  const { contacts, getContacts, } = useContext(
    ContactContext
  );

  useEffect(() => {
    getContacts();
    //eslint-disable-next-line
  });

  //prettier-ignore
  return (
    <Fragment>
      {contacts.length === 0 ? (
        <h4 style={{ textAlign: 'center' }}>Please add a contact</h4>
      ): null}
      {contacts.map(contact => (
          <ContactItem contact={contact} />

      ))}
    </Fragment>
  );
};

contacts最初是一个空数组，并且在getContacts向服务器发出请求之后，它更新了contacts状态但是即使getContacts()返回包含几个联系人的数组后，总会显示“请添加联系人”字样。似乎并没有重新渲染该部分组件，因为最初运行该组件时，contacts是一个空数组

Answer 1

谈到“为什么/不更新我的组件”，React遵循三个简单规则。只会在以下情况下“重新渲染”您的组件：

道具改变
状态改变
其上下文更改

对于后两个，使用适当的setter方法正确更改它们是至关重要的。例如，如果您通过挂钩使用状态（相对于基于类的状态），即

const [foo, setFoo] = useState('');

您已经使用setFoo：

setFoo(newValue);

如果仅更改Javascript变量：

foo = newValue;

React无法得知更改，因此您的组件不会重新呈现。

虽然您没有显示所有代码，但很可能您是在直接更改上下文，而不是使用适当的setter函数（作为状态变量的一部分）。

P.S。如果您需要澄清使用状态控制上下文的模式，请参见https://reactjs.org/docs/context.html#updating-context-from-a-nested-component。

Answer 2

请使用名为useState的钩子

import { useState } from "react";

const { contacts, getContacts, } = useContext(
    ContactContext
  );

  const [state, setState ] = useState({
      contacts:[]
  })

  useEffect(() => {

    setState({
        contact:getContacts()
    })
    //eslint-disable-next-line
  });

  //prettier-ignore
  return (
    <Fragment>
      {state.contacts.length === 0 ? (
        <h4 style={{ textAlign: 'center' }}>Please add a contact</h4>
      ): null}
      {state.contacts.map(contact => (
          <ContactItem contact={contact} />

      ))}
    </Fragment>
  );
};

Answer 3

唯一起作用的是这个，但是我不知道为什么以前不起作用以及为什么现在可以起作用：

if(contacts.length === 0 ){
      return <h4>Please add a contact</h4>
}

我将这一行代码放在另一个return语句之上

组件未在React中重新渲染

3 个答案: