ant-design里为了清空Modal中的值每次点击显示为它设置key,可是却报错

这是官网的解释:
<Modal /> 组件有标准的 React 生命周期,关闭后状态不会自动清空。 如果希望每次打开都是新内容,需要自行手动清空旧的状态。或者打开时给 Modal 设置一个全新的 key, React 会渲染出一个全新的对话框。
<Modal key={this.state.newKey} visible={this.state.visible} />

但是我用的时候就报错,还是说key相同。我一共三个model。一个父级内嵌套着两个子级。有时候点击这三个Modal的控制显示按钮会报错,有时候不会,报错信息:
图片描述

我的代码:

state = {
    loading: false,
    mainModal: false,
    inputItemModal:false,
    selectItemModel:false,
    inputModalKey:0,
    selectModalKey:0,
    mainModalKey:0,
};

showMainInput = () => {
    this.setState({
        mainModal: true,
        mainModalKey:this.state.mainModalKey+1
    });
};

selectItemModel = () => {
    this.setState({
        selectItemModel:true,
        selectModalKey:this.state.selectModalKey+1
    })
};

inputItemModel = () => {
    this.setState({
        inputItemModal:true,
        inputModalKey:this.state.inputModalKey+1
    })
};

<Modal

    isible={this.state.mainModal}
    onOk={this.handleOk}
    onCancel={this.handleCancel}
    className='edit-input-info'
    width={1200}
    key={this.state.mainModalKey}
    footer={[
            <Button key="back" size="large" onClick={this.handleCancel}>取消</Button>,
            <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
                        确定添加
           </Button>
                ]}

{/-------------------------录入商品弹框-----------------------/}

                    <Modal
                        visible={this.state.inputItemModal}
                        onOk={this.inputHandleOk}
                        onCancel={this.inputHandleCancel}
                        key={this.state.inputModalKey}

                     </Modal>

{/-------------------------选择商品弹框-----------------------/}

                    <Modal
                        visible={this.state.selectItemModel}
                        onOk={this.selectHandleOk}
                        onCancel={this.selectHandleCancel}
                        key={this.state.selectModalKey}

                     </Modal>
                    

</Modal>

阅读 8.3k
1 个回答

我之前一直以为同一个modal的key不同就可以,,,脑袋抽筋了才没想到只要是两个Modal的key相同就不行。。我这样做两个Modal的key会相等。
分别拼接三个字符串区分开就好啦,哈哈哈
clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题