为什么我不能从同一个响应对象设置两个不同的状态？

Question

我正在从处理与S3通信的NodeJS服务器向我的客户端返回一个S3签名的URL响应。我需要签名的URL从我的前端直接将图像上传到S3，并且我需要图像URL从S3桶中显示它。然而，我似乎无法用同一个响应对象设置两个不同的状态而不出现403(Forbidden(错误。我可以设置一个状态并使用它，但一旦我尝试使用同一个响应对象设置两个状态，它就不喜欢了。403错误

useEffect(() => {
async function getURL() { try {
await axios.get("imageRouter/S3Url").then((response) => {
setImageUrl(response.data.url.split("?")[0]);
setSignedUrl(response.data.url);
});} catch (error) {
console.log(error);
}}
getURL();}, 
[selectedFile]);

Answer 1

1. selectedFile不是useEffect的依赖项，这两个依赖项是：setImageUrl和setSignedUrl，您应该缓存它们，这样它们就不会在每次状态更改时更改(使用React.memo(。

2. 您应该检查返回的签名URL，默认情况下，过期时间为15分钟IIRC，因此，如果您生成一次并多次使用它，则应确保它没有过期，如果是，则重新生成它。这可以通过查看Expires参数来检查，该参数显示为签名URL上的查询参数。我们可以使用：https://www.epochconverter.com/以更可读的格式将其转换为时间戳