我有一个切片机
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
id:null,
email:null,
profiles:[],
currentProfile:[],
}
export const userClise = createSlice({
name: 'user',
initialState,
reducers: {
setUser: (state,action) => {
state.id = action.payload.id;
state.email = action.payload.email;
state.profiles = action.payload.profiles;
},
removeUser: (state) => {
state.id = null;
state.email = null;
state.profiles = null;
},
addProfile: (state,action) => { // SLICE TO ADD PROFILE TO profiles.Array
state.profiles.push(action.payload)
},
setCurrentProfile: (state,action) => { // SLICE TO FIND AND SET PROFILE
state.currentProfile.push(state.profiles.filter((profile) => profile.id === action.payload));
}
},
})
export const { setUser, removeUser, addProfileName, setCurrentProfile } = userClise.actions;
export default userClise.reducer;
我的reducer setCurrentProfile不工作。他给了我空数组---x1c 0d1x
下面是我使用配置文件ID的调度,这是配置文件项的组件,在父组件上,我从-- profiles:[]Map它们。逻辑是-首先添加配置文件,然后单击配置文件,我希望将此配置文件设置为当前配置文件:[],
import React from 'react'
import { Link } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { setCurrentProfile } from '../../../redux/userSlice';
export default function UserProfileItem({name,bgImg,redirect,id}) {
const dispatch = useDispatch();
const handleSetProfile = () =>{
dispatch(setCurrentProfile(id))
}
return (
<Link to={`/${redirect}`}>
<li onClick={handleSetProfile} className='w-[153px] h-[201px] sm:w-[140px] sm:h-[175px] cursor-pointer mr-7 group flex items-center flex-col'>
<div className='rounded-md border-4 border-transparent bg-center bg-cover w-full h-full group-hover:buttonUserScreen' style={{ backgroundImage:`url(${bgImg ? bgImg : "https://upload.wikimedia.org/wikipedia/commons/0/0b/Netflix-avatar.png"})`}}>
</div>
<span className='mt-3 group-hover:text-[#fff]'>{name || "user name"}</span>
</li>
</Link>
)
}
1条答案
按热度按时间py49o6xq1#
我找到了一个解决办法。不知何故,通过“id”查找不起作用,但如果我使用“name”istead就起作用了。