使用.map，我映射了所有卡，并且每个卡都有一个编辑按钮，因此，当我单击编辑按钮时，它将打开一个模态（antd），该模态具有带有输入值的表单。值与API绑定，当我打开任何卡模型时，它在输入中显示完美的值。
问题是，当我单击任何其他卡的编辑按钮时，它会再次显示相同的值（以前的弹出值）
代码：
{surveys.length > 0 && surveys.map((survey, i) => (
<Col className="gutter-row" xs={24} sm={12} md={12} lg={6} xl={6} key={survey.publicID}>
<Card
cover={<Link to='/survey'><img alt="example" src={ survey.imagePath || "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"} /></Link>}
actions={[
<img className="icons-svgs" src="/svg/Share.svg" onClick={() => this.onHandleShareSurvey(survey)} />,
<img className="icons-svgs" src="/svg/Edit.svg" onClick={() => this.onHandleEditSurvey(survey)} />,
<img className="icons-svgs" src="/svg/Duplicate.svg" onClick={()=>this.onHandleDuplicateSurvey(survey)} />,
<img className="icons-svgs" src="/svg/Delete.svg" onClick={() => this.onHandleDeleteSurvey(survey)}/>
]} >
<Row type="flex" align="middle">
<Col span={18}>
<Link to='/survey'>
<Meta
title={survey.Name}
description={survey.Description}
/>
</Link>
</Col>
<Col type="flex" span={6} align="middle">
<span onClick={()=> this.setUploadDataSurvey(true)}>
<Icon type="upload" className="upload-icon"/>
</span>
</Col>
</Row>
</Card>
</Col>
))}
弹出组件是：
<Modal
visible={visible}
onCancel={onCancel}
// onOk={() => this.setEditSurvey(false)}
title="Edit survey"
className= "surveys-popup"
style={{ top: 20 }}
destroyOnClose={true}
footer={false}
>
<Form onSubmit={this.handleEdit}>
<p className="form-title">What is your product?</p>
<FormItem key={10}>
{getFieldDecorator('Name', {
rules: [{ required: false, message: 'Title Can\'t leave blank' }],
})(
<div className="form-input">
<Input ref="Name" defaultValue={survey.Name}/>
</div>
)}
</FormItem>
<p className="form-title">Please describe your product</p>
<div className="form-input">
<FormItem key={11}>
{getFieldDecorator('Description', {
rules: [{ required: false, message: 'Description Can\'t leave blank' }],
})(
<div className="form-input">
<TextArea autosize={{ minRows: 2, maxRows: 6 }} ref="Description" defaultValue={survey.Description}/>
</div>
)}
</FormItem>
</div>
<div span={24} className="upload-images-container">
<div className="clearfix">
<Upload
action="//jsonplaceholder.typicode.com/posts/"
listType="picture-card"
fileList={fileList}
onChange={this.handleChange}
>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
</div>
</div>
<p className="form-title">Define your probability model <Icon type="info-circle" className="small-icon" /></p>
<div className="model-table">
<div className="table-column">
<div span={24} className="model-table-title">Too cheap %</div>
<div span={24} className="model-table-value">
<FormItem key={12}>
{getFieldDecorator('tooCheap', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input type="number" defaultValue={survey.tooCheap}/>
</div>
)}
</FormItem>
</div>
</div>
<div className="table-column">
<div span={24} className="model-table-title">Very cheap %</div>
<div span={24} className="model-table-value">
<FormItem key={13}>
{getFieldDecorator('veryCheap', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input type="number" defaultValue={survey.veryCheap}/>
</div>
)}
</FormItem>
</div>
</div>
<div className="table-column">
<div span={24} className="model-table-title">Cheap %</div>
<div span={24} className="model-table-value">
<FormItem key={14}>
{getFieldDecorator('cheap', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input type="number" defaultValue={survey.cheap}/>
</div>
)}
</FormItem>
</div>
</div>
<div className="table-column">
<div span={24} className="model-table-title">Correct price %</div>
<div span={24} className="model-table-value">
<FormItem key={15}>
{getFieldDecorator('correctPrice', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input type="number" defaultValue={survey.correctPrice}/>
</div>
)}
</FormItem>
</div>
</div>
<div className="table-column">
<div span={24} className="model-table-title">Expensive %</div>
<div span={24} className="model-table-value">
<FormItem key={16}>
{getFieldDecorator('expensive', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input type="number" defaultValue={survey.expensive}/>
</div>
)}
</FormItem>
</div>
</div>
</div>
<Row>
<Col xs={24} sm={12} md={12} lg={12} xl={12}>
<div className="form-title"><p>Choose a password <Icon type="info-circle" className="small-icon" /> (optional)</p>
<div>
<FormItem key={17}>
{getFieldDecorator('password', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input />
</div>
)}
</FormItem>
<FormItem key={17} className="hidden">
{getFieldDecorator('publicID', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input value={survey.publicID}/>
</div>
)}
</FormItem>
{/* <input value={survey.publicID} ref="publicID"/> */}
</div>
</div>
</Col>
<Col xs={24} sm={12} md={8} lg={8} xl={8} offset={4}>
<div className="form-title">
<p>(optional)</p>
<div>
<Upload key={10}>
<Button><Icon type="upload" /> UPLOAD DATA</Button>
</Upload>
</div>
</div>
</Col>
</Row>
<Row className="footer-cta">
<Button key="back" onClick={onCancel}>Cancel</Button>
<Button key="submit" type="primary" visible={visible} htmlType="submit" onClick={onCancel}>
Save
</Button>
</Row>
</Form>
</Modal>
答案 0 :(得分：2)
我有一个类似的问题，即我需要在重新打开时重新渲染Modal的内容-即，一个模式显示基于被单击按钮的内容，但是在关闭模式后，重新打开时显示相同的数据。
将destroyOnClose={true}添加到我的Modal属性中为我解决了这个问题。现在，关闭模态会破坏它，并且每次打开模态时，它都会根据用于打开它的按钮重新获取动态内容。
即
<Modal
destroyOnClose={true}
visible={this.state.modalVisible}
title="Example Modal"
onOk={this.changeTimeModalHandleOk}
onCancel={this.changeTimeModalHandleCancel}
>
...Dynamic Modal Content Here...
</Modal>
答案 1 :(得分：0)
我正在使用antd 4.2，并且遇到相同的问题，当我单击更新按钮以显示模型中的编辑表单，但模型为不同的记录显示了相同的值时，destroyOnClose={true}修复了我的问题问题。