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 is initially an empty array and after getContacts makes the request to the server, it updates the contacts state
but somehow the words 'Please add a contact' is always showing even after getContacts() returns an array with a few contacts. it seems like it does not re-render that part of the component because when the component initially ran, contacts was an empty array
3 Réponses :
En ce qui concerne "pourquoi / ne sera pas ma mise à jour de la composante", réagit de trois règles simples. Il ne "rendant" que votre composant si:
Pour ces deux derniers, il est critique em> que vous les modifiez correctement, à l'aide de la méthode Setter appropriée. Par exemple, si vous utilisez l'état via des crochets (par rapport à l'état basé sur la classe), c'est-à-dire. P> vous avez em> utiliser SETFOO CODE>: P> foo = newValue;
Veuillez utiliser Hook appelé usestate
La seule chose qui a fonctionné était ceci, mais je ne sais pas pourquoi il n'a pas fonctionné auparavant et pourquoi cela fonctionne maintenant:
if(contacts.length === 0 ){
return <h4>Please add a contact</h4>
}
Pouvez-vous compliquer la mise en œuvre getContacts?
Où sont les contacts mis à jour?
Utilisez-vous usestate?
@ Budaörs, je n'utilise pas usestate
@Chithambarakumar, getContacts appelle le serveur et met à jour les contextes de l'état avec un nouveau tableau de tous les contacts
@Meilechwieder Je pense que l'usestate d'ici aurait une excellente utilisation. Voulez-vous que je vous explique comment utiliser ici usestate?