如何添加一个随机数在下面的URL在reactjs?

Question

我有一个项目，我有一个创建/删除/更新。

所以在update组件中，我必须更新post Title, post Text和image。所以当我更新它们并按下提交按钮保存更改时，它工作得很好，但是它不会在UI上显示更改后的图像，直到重新加载页面，但它确实改变了文件系统中的图像

所以URL是这样的:http://localhost:3000/Post-Review/307我想为这个URL添加一个随机数，在ID之后

或者是否有其他方法可以解决这个问题。

是路由器:<Route path="/Post-Review/:id" exact> <Post /> </Route>

这是我提交的代码:

const submitUpdate = (e) => {
e.preventDefault();
const formData = postToFormData(
postObject,
file,
selectedTags,
deletedTags
);
formData.append("id", actualId);
axios
.put(`${targetServer}/posts/byId/${actualId}`, formData, {
headers: {
"Content-Type": "multipart/form-data",
accessToken: localStorage.getItem("accessToken"),
},
})
.then((res) => {
if (res.data.error) {
alert(res.data.error);
} else {
history.push("/");
}
});
};

感谢

Answer 1

你不能在组件内部使用一个useEffect，并把随机数放在image ref中吗?

src="myimage.jpg?timestamp=123"

随机数可以是timestamp。这样可以确保它始终是唯一的值。

const timestamp = new Date().getTime()

#更新

这是图片的URL，这就是我现在使用的。

src={`${targetServer}/posts/image/${postObject.id}`}

Answer 2

如果想更新UI，只需在POST请求成功后重新获取数据即可。React就是为这种用途而构建的。

下面是一个示例代码:

// your post data goes here
const [data, setData] = useState({
...
})
// a method to fetch post data by id
const fetch_data = (post_id) => {
axios
.get(`${targetServer}/posts/byId/${actualId}`, {
headers: {
"Content-Type": "multipart/form-data",
accessToken: localStorage.getItem("accessToken"),
},
}).then((res) => {
if (res.data.error) {
alert(res.data.error);
} else {
// if the update done, then call fetch
setData(res.data)
}
});
}
// the actual update function
const submitUpdate = (e) => {
e.preventDefault();
const formData = postToFormData(
postObject,
file,
selectedTags,
deletedTags
);
formData.append("id", actualId);
axios
.put(`${targetServer}/posts/byId/${actualId}`, formData, {
headers: {
"Content-Type": "multipart/form-data",
accessToken: localStorage.getItem("accessToken"),
},
})
.then((res) => {
if (res.data.error) {
alert(res.data.error);
} else {
// if the update done, then call fetch
fetch_data(post_id)
}
});
}