'reset' useState 关闭模态 reactJS 时的正确程度

Question

我想解释一下我今天遇到的问题。

目前我在这个模态中使用了一个模态我select一个值，这个工作正常。

我的问题和以下问题，当我点击取消按钮或十字关闭时。如果我再次打开模式，之前的值 select 仍然存在

我想 return 当我点击取消或叉号时回到它的初始状态当然，当我打开 select

中的模态无值时

我愿意接受任何建议，非常感谢。

ps：select 中的 leadsOptions 是数据 ofc，ps 2：可能是 useeffect/prevStateReset 到初始状态？

import React, { useState, useEffect } from "react"

function LeadModal({ isOpen, onClose }) {
 const [leadId, setLeadId] = useState(null);
 return (
    <Modal
        open={isOpen}
        getOpen={onClose}
    >
        <PanelHeader>
            <PanelTitle>
                add lead
            </PanelTitle>
            <SvgIcon
                onClick={onClose}
            />
        </PanelHeader>
          <PanelBody className="space-y-1 mb-2 ">
                            <Label>
                                Sélect lead
                            </Label>
                            <div>
                                <Select
                                    options={leadsOptions}
                                    placeholder="leads"
                                    getValue={(values) => {
                                        setleadId(values.value);
                                    }}
                                    value={leadId}
                                />
                            </div>
                        </PanelBody>
                        <PanelFooter>
                            <div>
                                <Button onClick={onClose}>
                                    Annuler
                                </Button>
                            </div>
                        </PanelFooter>
                    </>
    </Modal>
);
}

Answer 1

您再次打开模态时并未清除状态数据。在关闭或取消模式或类似的东西之前用初始值更新状态值。

<SvgIcon onClick={() => {setLeadId(null); onClose();}} />

'reset' useState 关闭模态 reactJS 时的正确程度

how correctly 'reset' useState when close modal reactJS

javascript

reactjs

react-hooks

use-state