web-dev-qa-db-ja.com

New To React Hook useState Is Returning Undefined

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

通知が_[]_であり、その後_props.notifications_が変更されたときにsetNotifications()で更新されることを期待しています。 _props.notification_はreduxストアからのものです。これが何かを変更するかどうかはわかりませんが、初期状態を設定しました。

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

なぜ未定義になるのかわからない...

編集：タイプミスとテストコードを取り除きました

javascriptreactjsreduxundefinedreact-hooks
2
RhinoBomb

初期状態を適切に設定するには、引数としてuseStateに渡す必要があるため、次のようにします。

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

また、どこかにprops.notificationsを設定してもしなくても、コンポーネントになんらかのデフォルト値があることに依存している場合は、次のようにその場所に設定する必要があります。

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

そして最後ですが、useEffectの依存関係リストで配列を使用すると、たとえばnotifications構造が同じ（同じアイテム、同じ長さ）のままである場合など、いくつかの望ましくない副作用がありますが、新しい配列になり、useEffectは浅い比較しか行わないため、キャッシュを見逃します。配列自体ではなく、何らかのハッシュ関数の使用を検討してください（例：JSON.stringify）

3
jayarjo