cloudary Widget在我的应用程序中填充两次

Question

我使用cloudary作为我的应用程序的图像托管DB。每当我为ORM函数切换提交时，我都会尝试调用小部件。调用正在工作，但是它正在生成两个相互叠加的小部件。

ORM模态:

const OneRepMaxModal = (props) => {
const [orm, setOrm] = useState({
benchPressMax: 0,
squatMax: 0,
overHeadPressMax: 0,
deadliftMax: 0,
})
const history = useHistory();
const [widgetModal, setWidgetModal] = useState(false)
const ormChangeHandler = (event) => {
const name = event.target.name;
const value = event.target.value;
const tempOrm = { ...orm };
tempOrm[name] = value;
setOrm(tempOrm);

}
const widgetToggle = () => {
setWidgetModal(widgetModal ? false : true);
}

const ormSubmitHandler = () => {
console.log(orm + ' orm con log ')
axios.post(`http://localhost:8080/specificPlanORM/${props.planID}`, orm, {
headers: {
'Content-Type': 'application/json'
}
}).then(() => {
console.log('toggle')
widgetToggle();

})
}
function widgetDisplay() {
console.log('display')
if (widgetModal) {
return (
<CloudinaryUploadWidget planID={props.planID} />

)
}
}
return (
<div className='page-overlay'>
<div className='modal-table'>
<button className='close-button' onClick={props.onClick}> X
</button>
<form className='modal-form-container'>
<div className="flexbox-item modal-form">
<label className='h1-underline' >BenchPress max</label>
<input name="benchPressMax" value={orm.benchPressMax} onChange={ormChangeHandler} type="number" className="form-control" />
</div>
<div className="flexbox-item modal-form">
<label >Squat max</label>
<input name="squatMax" value={orm.squatMax} onChange={ormChangeHandler} type="number" className="form-control" />
</div>
<div className="flexbox-item modal-form">
<label >deadlift max</label>
<input name="deadliftMax" value={orm.deadliftMax} onChange={ormChangeHandler} type="number" className="form-control" />
</div>
<div className="flexbox-item modal-form">
<label >Overhead Press max</label>
<input name="overHeadPressMax" value={orm.overHeadPressMax} onChange={ormChangeHandler} type="number" className="form-control" />
</div>
<button onClick={ormSubmitHandler} type='button'>Submit</button>
</form>
{widgetDisplay()}
</div>
</div>
)
}

Cloudinary部件:

const CloudinaryUploadWidget = (props) => {
const history = useHistory();
const [plan, setPlan] = useState({
image: ''
})
useEffect(() => {
axios.get(`http://localhost:8080/findSpecificPlan/${props.planID}`, {
headers: {
'Content-Type': 'application/json'
}

}).then((response) => {
setPlan(response.data);
console.log(response.data)
}).catch((error) => {
console.log('error in getting plan')

});

}, []);

function showUploadWidget() {
window.cloudinary.openUploadWidget({
cloudName: "<CloudName>",
uploadPreset: "<UploadPreset>",
sources: [
"local",
"camera",
"instagram",
"facebook"
],
googleApiKey: "<image_search_google_api_key>",
showAdvancedOptions: true,
cropping: true,
multiple: false,
defaultSource: "local",
styles: {
palette: {
window: "#464040",
sourceBg: "#292222",
windowBorder: "#c7a49f",
tabIcon: "#cc6600",
inactiveTabIcon: "#E8D5BB",
menuIcons: "#ebe5db",
link: "#ffb107",
action: "#ffcc00",
inProgress: "#99cccc",
complete: "#78b3b4",
error: "#ff6666",
textDark: "#4C2F1A",
textLight: "#D8CFCF"
},
fonts: {
default: null,
"'Merriweather', serif": {
url: "https://fonts.googleapis.com/css?family=Merriweather",
active: true
}
}
}
},
(err, info) => {
if (!err) {    
console.log("Upload Widget event - ", info);
} 
} 
);
}
return (
<div>{showUploadWidget()}</div>
);
}
export default CloudinaryUploadWidget

函数正在工作，并正确地传递我的一切。我所有的会议日志都相应地打印一次(除了cloudary的会议日志)。

控制台日志:

OneRepMaxModal.js:41 Display (First call when display is false )
OneRepMaxModal.js:29 [object Object] orm con log 
OneRepMaxModal.js:35 Toggle
OneRepMaxModal.js:41 Display (Second call when state is change to true)
CloudinaryUploadWidget.js:22 {id: 128, name: 'Five Three One', planStart: '2022-05-06', planEnd: null, ormId: {…}}
CloudinaryUploadWidget.js:73 Upload Widget event -  {info: {…}, event: 'source-changed', uw_event: true, data: {…}}
CloudinaryUploadWidget.js:73 Upload Widget event -  {info: {…}, event: 'source-changed', uw_event: true, data: {…}}
CloudinaryUploadWidget.js:73 Upload Widget event -  {info: 'shown', event: 'display-changed', uw_event: true, data: {…}}
CloudinaryUploadWidget.js:73 Upload Widget event -  {info: 'shown', event: 'display-changed', uw_event: true, data: {…}}

Answer 1

去掉useEffect，问题就解决了。