我正在使用fetchapi，所以我的目標是觸發一個POST請求，然后將從此呼叫接收到的結果存盤在一個狀態中。這是我使用的代碼：
interface IPreviewFile {
file: IFile;
}
export default function PreviewFileModal({ file }: IPreviewFile) {
const source = useSelector((state: AppState) => state.source);
const project = useSelector((state: AppState) => state.project);
const data = {
fileName: file.path,
accountName: source.Name,
bucket: source.bucket,
id: source.id
};
useEffect(() => {
Promise.all([
fetch(`${API_URL}/api/project/${project.id}/filepreview`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
])
.then(async ([aa]) => {
const a = await aa.json();
return [a];
})
.then((responseText) => {
setStringArray(readString(responseText[0].value).data);
})
.catch((err) => {
console.log(err);
});
}, [project.id, data]);
console.log(stringArray);
return (
<>
<div></div>
</>
);
}
在console.log(stringArray);控制臺列印出所有的2-3秒的延遲后的時間。如您所見，我使用它Promise是為了避免這種情況，但由于某種原因它仍然會發生。任何想法是什么導致一直重新渲染以及如何解決它？
uj5u.com熱心網友回復：
我嘗試稍微更改代碼以避免由于資料變數添加為 useEffect 的依賴項而重新渲染組件。我沒有看到對 stringArray 的任何參考，所以我將它添加為狀態變數。
export default function PreviewFileModal({ file }: IPreviewFile) {
const source = useSelector((state: AppState) => state.source);
const project = useSelector((state: AppState) => state.project);
const [stringArray, setStringArray] = useState("");
useEffect(() => {
fetch(`${API_URL}/api/project/${project.id}/filepreview`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
fileName: file.path,
accountName: source.Name,
bucket: source.bucket,
id: source.id
})
})
.then(res => res.json())
.then((result) => {
result && setStringArray(readString(result.value).data);
})
.catch((err) => {
console.log(err);
});
}, [project.id]);
console.log(stringArray);
return (
<>
<div></div>
</>
);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326544.html