英文:
React: How to reset state in custom hook
问题
我有一个React组件（AddSlides），它使用useUpload自定义钩子来上传文件，钩子返回下载链接。当AddSlides组件重新渲染时，钩子返回相同的值。为了避免这种情况，我在AddSlides组件的useEffect中调用reset方法，但这导致无限循环，这并不奇怪。
如何在使用后将downloadUrls重置为空？（请参见下面的reset方法。）
React组件addSlides.js
export default function AddSlides() {
const [filesToUpload, setFilesToUpload] = useState([]);
const { downloadUrls, setDownloadUrls, reset } = useUpload(
filesToUpload,
"AddSlides"
);
const [allUrls, setAllUrls] = useState([]);
useEffect(() => {
setAllUrls([...allUrls, ...downloadUrls]);
setFilesToUpload([]); // 重置文件为空
//reset(); // 重置下载链接，但这会导致无限循环。
}, [downloadUrls]);
return (<>//一些代码</>);
}
自定义钩子useUpload.js
export default function useUpload(files, componentName = "") {
const [downloadUrls, setDownloadUrls] = useState([]);
const reset = () => {
console.log("将下载链接重置为空");
setDownloadUrls([]); // 将值重置为空数组。
};
useEffect(() => {
// 这里有一些代码
}, [files, componentName]);
return {
downloadUrls,
setDownloadUrls,
reset,
};
}
英文:
I have a react component (AddSlides) which is using useUpload custom hook to upload files, in response the hook returns the download urls. The hook is returning the same value when AddSlides component is re-rendered. To avoid this I am calling reset method in useEffect of AddSlides component, but this is causing infinite loop, which is not surprising.
How do I reset the downloadUrls to empty after using it ? (See below reset method.
React Component addSlides.js
export default function AddSlides() {
const [filesToUpload, setFilesToUpload] = useState([]);
const { downloadUrls, setDownloadUrls, reset } = useUpload(
filesToUpload,
"AddSlides"
);
const [allUrls, setAllUrls] = useState([]);
useEffect(() => {
setAllUrls([...allUrls, ...downloadUrls]);
setFilesToUpload([]); // Resetting the files to empty
//reset(); // Resetting the download urls, but this is causing an infinite loop.
}, [downloadUrls]);
return (<>//some code</>)
}
Custom hook useUpload.js
export default function useUpload(files, componentName = "") {
const [downloadUrls, setDownloadUrls] = useState([]);
const reset = () => {
console.log("Setting download urls to empty");
setDownloadUrls([]); // Resetting the value to empty array.
};
useEffect(() => {
// Some code here
}, [files, componentName]);
return {
downloadUrls,
setDownloadUrls,
reset,
};
}
答案1
得分: 1
只有在数组长度大于0时才执行重置。
英文:
Execute reset only if array length > 0
useEffect(() => {
setAllUrls([...allUrls, ...downloadUrls]);
setFilesToUpload([]); // Resetting the files to empty
if (downloadUrls.length > 0) {
reset()
}
}, [downloadUrls]);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论