2021.03-23 如何在前端页面更改数据库的值_前端小游戲數據修改-优快云博客

本文介绍了一个使用Redux-Toolkit和React实现的文章收藏功能。通过点击组件中的收藏按钮，触发父组件方法，更新Redux状态管理库中的数据，从而实现文章收藏状态的改变。在Redux中，通过找到目标文章的索引并更新其收藏状态，然后保存到新的数据列表中。整个过程涉及组件通信、状态管理和数据持久化。

 在现实案例中，有很多诸如此类的实际功能需求，
 例如在前端页面收藏哪篇文章，那么对应的后台数据也是要跟着变化的
 在本片按文章中，我写的会稍微i复杂了一些，因为我的redux是用redux-toolkit工具
 在页面也是拆分了组件的，而且会为了实现别的功能做了一些代码的调整，小伙伴自行删减哈。

我想要完成的功能是，点击组件里的收藏按钮，对应的数据发生改变。

首先是组件页面

const toSave = () => {
    console.log('1111');

  save({isSaved: !itemIsSaved})
// save是父组件传过来的方法， itemIsSaved是父组件传来的需要更改的字段
  }

接下来是父组件、

<Card 
      itemIsSaved = {item.isSaved} 
      save = {(params)=>save(item.id,params)} />
 //由于我是遍历的子组件所以有item。我们利用子组件改变isSaved重新定义给params，然后传给父组件的save方法

--------------------------------------------------------------------------------
const save = (id:number, params:any) => {
//我们先将从redux里获取到的xjhList拷贝出来一个新的数据
     const newXjhList = [...xjhList];
     //通过findIndex方法根据id得到对应点击的索引值
     const index = xjhList.findIndex((item) => {
       return id === item.id
     })
     console.log(index,id);
     //根据索引值改变新的数据
     newXjhList[index] = {...newXjhList[index], ...params}
     //把新的数据保存到redux里面
      dispatch(xjhActions.saveXjhList({ data: newXjhList ,type:'save'}));
    }

接下来是redux页面

reducers: {
//payload就是在主页面saveXjhList后面的对象
saveXjhList: (state, { payload }: PayloadAction<any>) => {
//因为我有其他的方法所以需要判断type，是不是泥收藏时候调用的dispatch
//如果是你自己写，完全可以不写type
  return {
    ...state,
    xjhList: payload.type ==='save' ? payload.data : state.xjhList.concat(payload.data)
  };
},

大致就是这样子，以后我再好好调整一下，步步学习，淦！