reactjs - 当对象数组更改 *hooks* 时,useState 不会导致重新渲染
问题描述
我有一个对象,它有许多键,每个键都有一个对象数组。每个对象都包含一个图像文件,我需要显示该文件以预览用户刚刚上传的图像。但它显示的是上次上传的图像(不是刚刚上传的图像)
显然 useState 不会立即导致重新渲染,除非它看到数组或对象中的更改如何在 React Hooks 中的对象数组中更新状态 onchange
我遵循上述(以及来自 StackOverflow 的一些类似建议)并在键处制作了对象的副本和数组的副本,但它仍然不起作用
知道为什么吗?
const Form = props => {
let [images, setImages] = useState({
bannerPicture: [],
projectPictures: [],
projectsPictures: [],
thumbnailPictures: []
})
const showTempImage = (file, tempFileObj, key) => {
const imagesCopy = {...images}
// add this image to the end of the array at the given key
imagesCopy[key] = [...imagesCopy[key], tempFileObj]
setImages({...imagesCopy})
....
}
我只希望图像在用户上传后立即显示
解决方案
从您的async
功能中执行此操作。
我假设您只会在上传完成后显示图像。
const mockUploadApi = () => {
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve("uploadedImage");
},1000);
});
};
const App = () => {
const [state,setState] = React.useState({
status: "IDLE",
image: ""
});
const uploadImage = () => {
setState((prevState) => ({
...prevState,
status: "UPLOADING"
}));
// THIS SHOULD USE await BUT THE SNIPPET DOES NOT ALLOW IT
// SO I'M USING .then()
mockUploadApi().then((uploadedImage) => {
setState({
status: "IDLE",
image: uploadedImage
});
});
};
return(
<div>
<div>
status: {state.status}
</div>
<div>
image: {state.image || "no image"}
</div>
<div>
<button onClick={uploadImage}>
Upload
</button>
</div>
</div>
);
};
ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
推荐阅读
- reactjs - React Native 和 Https 代理
- selenium - Selenium Webdriver 检查图像是否使用 id 显示
- javascript - 在 contenteditable div 中更改 innerHTML 时保留光标位置
- regex - 不显示字母数字正则表达式格式的密码验证消息
- awk - How to replace some particular column values in a file from the columns of other file
- sql - 如何在 SQL 的单列中显示多列?
- google-analytics - 为什么我的跟踪链接 Source/Medium 显示为 EmailCampaign/email
- c - 如何正确检查调试器?
- r - 在 emacs ess 中编辑 R 函数时的变量范围
- ubuntu - 尝试使用 minikube 运行 kubectl get pods 时无法读取客户端证书和客户端密钥