umi+dva+antd后台管理系统(6)---table数据的改查

最新推荐文章于 2025-06-04 17:19:55 发布

阿星始于现在

最新推荐文章于 2025-06-04 17:19:55 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： reactjs 前端

本文链接：https://blog.csdn.net/qq_38188709/article/details/103924446

数据的增删改查！源码在这儿MyGithub，觉得有帮助的话留颗小星星哦~

1. 修改

效果：
点击编辑按钮路由跳转修改页，并且参数传递，商品信息自动填在另外一个表单中

先制作一个简单的修改页表单

用户名/自动填充，类别/选择，数量/数字输入框，图片/上传。
可以看出，这些都是可变的，id是不可变的，id才是我们要实现此功能的切入点，可以分为以下几个步骤：

点击按钮，获取id，跳转至编辑页

编辑页根据id，发请求获取到该商品信息并自动填充

点击编辑页提交按钮，发送修改请求，修改成功~

具体怎么修改呢，一步一步进阶把~

**初级**

只要点击，就传过来id存着

page:

import router from 'umi/router';

  function onClick(e) {
     
     
  console.log(e);
  if (isLogined()) {
     
     
    console.log(e);
    dispatch({
     
     
      type: 'products/editor',
      payload: {
     
     
        id: e,
      },
    });
    router.replace("/editor")
  }
}

<Popconfirm title="Edit?" onConfirm={
     
     () => onClick(record._id)}>
              <Button
                type="primary"
                style={
     
     {
     
      width: '35%', textAlign: 'center' }}
                icon="edit"
              ></Button>
</Popconfirm>

model: id传过来拉，另一个页面可以取啦

reducers:
editor(state,{
   
   payload}){
   
   
     console.log("我来咯",payload)
      return {
   
   ...state,...payload}
    }

**中级**

那么我们的思路就可以变成：
1. 点击按钮，根据id发起一个获取详情请求，获取此商品的详细信息，
2. 在编辑页接收这个id和详细信息，填进表单
3. 点击submit，发起一个修改请求，修改商品信息

定义请求

//点击编辑按钮，通过id获取详情
export const Detail=(id)=>{
   
   
  return instance.GET("/api/crud/"+id)
}

定义model

effects:
//点击编辑按钮，通过id获取详情
*detail({
   
   payload},{
   
   call,put}){
   
   
      const result=yield call(Detail,payload.id)
      yield put({
   
   
        type:'editor',
        payload:{
   
   
          product:result.data
        }
      })
    }
 reducers:
 //获取详情之后，保存详情
 editor(state,{
   
   payload}){
   
   
      console.log("我准备好了",payload)
        return {
   
   ...state,...payload}
    }

商品管理页没改还是测试时的代码

	import router from 'umi/router';

	  function onClick(e) {
   
   
      console.log(e);
      if (isLogined()) {
   
   
        console.log(e);
        //点击请求数据并存在redux里等着被处理
        dispatch({
   
   
          type: 'products/editor',
          payload: {
   
   
            id: e,
          },
        });
        //点击跳转咯
        router.replace("/editor")
      }
    }
    
   <Popconfirm title="Edit?" onConfirm={
   
   () => onClick(record._id)}>
                  <Button
                    type="primary"
                    style={
   
   {
   
    width: '35%', textAlign: 'center' }}
                    icon="edit"
                  ></Button>
   </Popconfirm>

编辑页得通过connect拿到数据，才能去使用待被处理的数据

希望展示的效果是，名字自动填充，点击提交信息更改成功.

拿到传过来的数据

import {
   
    connect } from 'dva';

 componentDidMount(){
   
   
 //因为这是编辑页，所以我把数据直接放在这了~
    const {
   
    product} = this.props;
    console.log(product)

  }

//和之前一样，表单需要 Form.create ！！！
const editor = Form.create({
   
    name: 'validate_other' })(edit);
const mapStateToProps = state => state.products;
export default connect(mapStateToProps)(editor);

使用拿过来的数据

//直接用set把值填进去，再发请求修改商品信息就完事了
componentDidMount(){
   
   
    console.log(this.props)
    const {
   
    product} = this.props;
   //填值
    this.props.form.setFieldsValue({
   
   
      proName: product.data.title
    });
  }

**终级**

注意！！！！！

注意，通过状态管理是取巧，但是不对，class跨组件传参正确的是通过props！！超简单！！

$\color{red}{这样才是正常的class组件跨页面传参：}$

第一个页面传：
function onClick(e) {
   
   
     // 点击跳转页面并把id传过去
      if (isLogined()) {
   
   
        router.replace('/editor?id='+e);
      }

第二个页面收：

  componentDidMount(){
   
   
    // 挂载完成的this.props里面的location的search属性就有id啦
    console.log(this.props)
    const {
   
    product} = this.props;
    console.log