web-dev-qa-db-fra.com

Nouveau pour React Hook useState est de retour non défini

useState() me donne undefined à la nouvelle variable d'état (notifications):

const Notifications = (props) => {
    const [notifications, setNotifications] = useState(props.notifications);//notifications = undefined, props = {notifications: Array(0)}
    useEffect(() => {
        if (props.notifications) {
        setNotifications(props.notifications);
        }
    }, [props.notifications]);
    // do stuff....

Je m'attends à ce que les notifications soient [], Puis le mettre à jour avec setNotifications() lorsque props.notifications Change. props.notification Provient d'un magasin redux. Je ne sais pas si cela change quoi que ce soit, mais j'ai défini un état initial.

const initialState = Immutable.fromJS({
  notifications: [],
});

Je ne sais pas pourquoi je suis indéfini ...

Edit: Débarrassé de la faute de frappe et du code de test

javascriptreactjsreduxundefinedreact-hooks
2
RhinoBomb

Pour définir correctement l'état initial, vous devez le passer à useState comme argument, donc:

const [notifications, setNotifications] = useState([]);

Peu importe si vous définissez props.notifications à l'extérieur quelque part ou non, mais si vous comptez sur le fait qu'il ait une sorte de valeur par défaut dans le composant, alors vous devriez le définir ici, par exemple:

const Notifications = ({ notifications = [] }) => {

Et le dernier mais non le moindre, l'utilisation de tableau dans la liste de dépendances de useEffect a des effets secondaires indésirables, par exemple si notifications structurellement restera le même (mêmes éléments, même longueur), mais sera un nouveau tableau, useEffect manquera un cache, car il ne fait qu'une comparaison superficielle. Envisagez d'utiliser une fonction de hachage d'une sorte au lieu du tableau lui-même (par exemple JSON.stringify)

3
jayarjo