ReactJS: fetch给出错误无法读取属性

Question

我正在尝试调用api (get)来下载文档。

我的问题是，当我做这个api调用我收到错误:

TypeError: Cannot read properties of undefined (reading 'payload')

const printPin = event => {
event.preventDefault()
//....
props.printedPin(scePersonaEntity.perCod, activateAlert)
}

我的减速机:

export const printedPin= (id, callback) => {
const requestUrl = `${apiUrl}/${id}/printpin`
fetch(requestUrl)
.then((response) => {
response
.blob()
.then(blob => {
console.log("blob ", blob)
if (blob.type === 'application/problem+json') {
callback();
}
else {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'pin.pdf';
a.click();
}
})
.catch(err => console.log(err))
})
}

你认为我该如何修复这个错误?谢谢你。

Answer 1

我认为你的.then链是不正确的。

你能试一次吗?

export const printedPin = (id, callback) => {
const requestUrl = `${apiUrl}/${id}/printpin`
fetch(requestUrl)
.then((response) => response.blob()).then(blob => {
console.log("blob ", blob)
if (blob.type === 'application/problem+json') {
callback();
}
else {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'pin.pdf';
a.click();
}
})
.catch(err => console.log(err))
}

第一个then将返回response.blob()，下一个then将处理前一个的响应。