Question

我正在学习 Redux 的教程，但我被困在应该具有图像 url 的状态返回为未定义的状态。图像已成功保存在 firbase 存储中并已分派，但是当我尝试使用 useSelector 获取新路由上的 url 时，它未定义。

import React, {useEffect} from "react";
import {useSelector} from "react-redux";
import {useHistory} from "react-router-dom";
import "./ChatView.css";
import {selectSelectedImage} from "./features/appSlice";

function ChatView() {
    const selectedImage = useSelector(selectSelectedImage);
    const history = useHistory();

    useEffect(() => {
        if(!selectedImage) {
            exit();
        }
    }, [selectedImage])

    const exit = () => {
        history.replace('/chats');
    }

    console.log(selectedImage)

    return (
        <div className="chatView">
            <img src={selectedImage} onClick={exit} alt="" />
        </div>
        
    )
}

export default ChatView

为聊天创建的减速器（切片）：

import { createSlice } from '@reduxjs/toolkit';

export const appSlice = createSlice({
  name: 'app',
  initialState: {
    user:null,
    selectedImage:null,
  },

  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    },
    logout: (state) => {
      state.user = null;
    },
    selectImage:(state, action) => {
      state.selectedImage = action.payload
    },
    resetImage:(state) => {
      state.selectedImage = null
    }
  },
});

export const { login, logout, selectImage, resetImage} = appSlice.actions;

export const selectUser = (state) => state.app.user;
export const selectSelectedImage = (state) => state.app.selectImage;

export default appSlice.reducer;

以及用于发送 imageURL 的代码，当我在 console.log 中它给出正确的 url 时：

import {Avatar} from "@material-ui/core";
import StopRoundedIcon from "@material-ui/icons/StopRounded"
import "./Chat.css";
import ReactTimeago from "react-timeago";
import {selectImage} from "./features/appSlice";
import {useDispatch} from "react-redux";
import {db} from "./firebase";
import {useHistory} from "react-router-dom";

function Chat({id, username, timestamp, read, imageUrl, profilePic}) {
    const dispatch = useDispatch(); 
    const history = useHistory();

    const open = () => {
        if(!read) {
            dispatch(selectImage(imageUrl));
            db.collection('posts').doc(id).set({read:true,}, {merge:true});

            history.push('/chats/view');
        }
    };

    return (
        <div onClick={open} className="chat">
            <Avatar className="chat__avatar" src={profilePic} />
            <div className="chat__info">
                <h4>{username}</h4>
                <p>Tap to view - <ReactTimeago date={new Date(timestamp?.toDate()).toUTCString()} /></p>
            </div>

            {!read && <StopRoundedIcon className="chat__readIcon" />}
        </div>
    )
}

export default Chat

Answer 1

您的选择器正试图访问错误的字段。

export const selectSelectedImage = (state) => state.app.selectImage;

实际上应该是： export const selectSelectedImage = (state) => state.app.selectedImage; 因为您所在的州有 selectedImage 字段而不是 selectImage。

Redux - useSelector 将状态返回为未定义

1 个答案: