Новое, чтобы реагировать на хук useState возвращает неопределенный

Question

useState() дает мне неопределенное значение для новой переменной состояния (уведомления):

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....

Я ожидаю, что уведомления будут [], а затем впоследствии обновят его с помощью setNotifications(), когда props.notificationsизменения.props.notification приходит из магазина редуксов.Я не знаю, если это что-то меняет, но я установил начальное состояние.

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

Не знаю, почему я получаю неопределенный ...

Редактировать: Избавился от опечаткии тестовый код

Answer 1

Чтобы правильно установить начальное состояние, вы должны передать его useState в качестве аргумента, поэтому:

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

Также не имеет значения, если вы установили props.notifications где-то вне или нет, но если вы полагаетесьесли у него есть какое-то значение по умолчанию в компоненте, то вы должны установить его прямо здесь, например:

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

И последнее, но не менее важное, использование массива в списке зависимостей useEffect имеет некоторыенежелательные побочные эффекты, например, если notifications structuruly останется прежним (те же элементы, той же длины), но будет новым массивом, useEffect пропустит кэш, так как он выполняет только поверхностное сравнение.Рассмотрите возможность использования некоторой хеш-функции вместо самого массива (например, JSON.stringify)