账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    antd modal关闭时不再调用接口
    47
    0

    我是采用以下方法来监听传入数据是否发生改变:

     componentWillReceiveProps(nextProps) {
        // 判断传入数据是否改变
        if (JSON.stringify(nextProps.data) !== JSON.stringify(this.props.data)) {
          // 取到车系数据
          getSeriesTreeList({ brandid: nextProps.data.brandId }, (data) => {
            let { carListData } = this.state;
            // 取到车型数据
            getModelList({ seriesid: nextProps.data.seriesId }, (modelData) => {
              // 格式化车型数据
              for (let i in modelData) {
                modelData[i].value = modelData[i].vmid;
                modelData[i].label = modelData[i].name;
              }
              // 格式化车系数据
              for (let i in data) {
                data[i].value = data[i].SeriesID;
                data[i].label = data[i].name;
                data[i].isLeaf = false;
                // 组装车系下的车型
                if (data[i].SeriesID === nextProps.data.seriesId) {
                  data[i].children = modelData
                }
              }
              // 组装品牌下的车系
              for (let i in carListData) {
                if (carListData[i].value === nextProps.data.brandId) {
                  carListData[i].children = data;
                }
              }
              let arr = [nextProps.data.brandId, nextProps.data.seriesId, nextProps.data.vmId];
              this.setState({
                carListData,
                carTypeData: arr,
              });
            })
          })
        }
      }

    点击打开modal时,监听到数据改变就会调用接口查询详情,但是在关闭modal后,没有数据传入,此时调用接口时因为没有查询数据,系统就会报错。能有什么办法在关闭时不再调用接口?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 泛少 普通会员 1楼

      在antd modal组件中,关闭模态框时,通常会调用相应的关闭方法(比如onOkonCancel等),来处理关闭操作。然而,如果你不希望在关闭模态框时调用接口,你可以在调用关闭方法时,将onOkonCancel等方法作为参数传递进去。

      以下是一个示例:

      ```jsx import React, { useState } from 'react'; import Modal from 'antd';

      const MyModal = () => { const [visible, setVisible] = useState(true);

      const handleOk = () => { setVisible(false); };

      const handleCancel = () => { setVisible(false); };

      return (

      Modal Content

      ); };

      export default MyModal; ```

      在这个示例中,我们使用了useState来管理模态框的可见状态。在handleOkhandleCancel方法中,我们设置了模态框的可见状态为false。这样,当用户点击模态框的关闭按钮时,模态框的可见状态就会立即变为false,从而避免了调用接口。

      需要注意的是,这种方法只能在用户点击模态框的关闭按钮时调用接口,如果用户在模态框中输入了内容,或者模态框在打开过程中被其他操作改变状态,那么在用户点击关闭按钮时,就不应该调用接口。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部