问题描述
我正在尝试将用户资源的实例发布到我的项目中。我注意到当我不得不等到重新启动项目以查看新实例时,状态并未更新。在我的项目中,用户和资源之间存在多对多关系,其中user_resource作为联接。
尽管该实例发布在我的后端,但它不会显示在前端。我的POST提取似乎获取了正确的数据,甚至执行了正确的操作,但是却无法更新化简器中的任何内容。我认为这可能与我为减速器设置特定案例有关,尽管我不知道自己在做什么错。当我使用调试器时,它会执行操作,但不会执行减速器。我尝试为user_resources创建一个完整的单独的reducer,但这也不起作用。
{{ }}
fetch('http://localhost:3000/user_resources',{
method: 'POST',headers: {
'Content-Type': 'application/json',Accept: 'application/json'
},body: JSON.stringify({
resource_id: item.id,user_id: this.props.users.id,name: item.name,description:item.description,link:item.link,})
})
.then(res => res.json())
.then(data2 => {
console.log(data2)
this.props.addUserResource(data2)
console.log(this.props)
debugger
})
}
let userInitialState = {
id: 0,username: "",name: '',category: '',token: "",user_resources:[],}
let userReducer = (state = userInitialState,action) => {
debugger
switch(action.type){
case "ADD_USERS":
let singlenestedobject = {
...action.users.user,token: action.users.token
}
return {
...state,username: action.users.user.username,token: action.users.token,id: action.users.user.id,name: action.users.user.name,category: action.users.user.category,user_resources: action.users.user.user_resources
}
case "ADD_ONE_USER_RESOURCE":
let copyOfResources = [...state.users.user.user_resources,action.userResources]
debugger
console.log(...state.user_resources)
console.log(action.userResources)
console.log(copyOfResources)
return {
...state,user_resources: action.userResources
}
default:
return state
}
}
解决方法
您应该检查redux开发工具,我的猜测是您将数据写入了错误的位置。
这里:
let copyOfResources = [...state.users.user.user_resources,action.userResources]
资源在state.users.user.user_resouces
中,但在这里:
return {
...state,user_resources: action.userResources,};
您将资源写入state.user_resources
我认为您需要这样做:
return {
...state,users: {
...state.users,user: {
...state.users.user,user_resources: [
...state.users.user.user_resources,action.userResources,],},};