Javascript React显示indexedDB中图像的宽度

我需要渲染我上传的所有图像的宽度和高度。 我将图像放入数据库，并将其呈现为src base64字符串。 我的建议是渲染整个img>获取宽度>将其置于状态，但这项工作不是我所期望的。 首先，它只在img加载时获取宽度，然后我需要重新渲染显示宽度的元素。 第二个问题我认为我需要修改我的状态以渲染所有具有其自身属性的图像）

import React，{useState，useffect}来自“React”；
从“德西”进口德西；
常量Main=（）=>{
//设置数据库
const db=新的Dexie（“ReactDexie”）；
//创建数据库存储
db.version（1）.stores({
帖子：“标题、内容、文件、类型”
})
db.open（）.catch（（错误）=>{
console.log（err.stack | | err）
})
//设置状态和属性
const[postTitle，setTitle]=useState（“”）；
const[postContent，setContent]=useState（“”）；
const[postFile，setFile]=useState（“”）；
const[posts，setPosts]=useState（“”）；
const[type，setType]=useState（“”）；
const[width，setWidth]=useState（0）；
//读取文件并对其进行解码
const getFile=（e）=>{
console.log（'set:'，e）
setType（e[0].type）
let reader=new FileReader（）；
reader.readAsDataURL（e[0]）；
reader.onload=（e）=>{
setFile（reader.result）；
}
}
constdeletepost=async（id）=>{
console.log（id）；
db.posts.delete（id）；
让allPosts=wait db.posts.toArray（）；
//设岗
设置柱（所有柱）；
}
让post={
标题：postTitle，
内容：后内容，
文件：postFile，
类型：类型，
宽度：宽度
}
//提交
const getPostInfo=（e）=>{
e、 预防默认值（）；
if（postTitle！==“”&&postContent！==“”&&postFile！==“”）{
db.posts.add（post）.then（async（）=>{
//检索数据库中的所有帖子
让allPosts=wait db.posts.toArray（）；
//设岗
设置柱（所有柱）；
});
}
}
useffect（（）=>{
//从数据库中获取所有帖子
const getPosts=async（）=>{
让allPosts=wait db.posts.toArray（）；
设置柱（所有柱）；
}
getPosts（）；
}, [])
让postData；
如果（posts.length>0）{
var image=document.createElement（'img'）；
postData=
{
posts.map（post=>{
返回
{post.title}
{post.content}

console.log（post.width）}>width:{post.width}
deletePost（post.title）}>Delete
})
}
}否则{
postData=
没有可显示的帖子

}
返回(
标题
setTitle（e.target.value）}/>
内容
setContent（e.target.value）}/>
选择一个文件
{ 
getFile（e.target.files）}}/>
宽度：{post.WIDTH}

{postData}
);
}
导出默认主；

如何渲染img宽度？我只能在图像加载时才能得到它。。。有没有办法从base64字符串中获取此信息

import React , {useState, useEffect} from 'react';
import Dexie from "dexie";

const Main = () => {
    
    //set the database 
    const db = new Dexie("ReactDexie");
    //create the database store
    db.version(1).stores({
        posts: "title, content, file, type"
    })
    db.open().catch((err) => {
        console.log(err.stack || err)
    })
    
    //set the state and property
    const [postTitle, setTitle] = useState("");
    const [postContent, setContent] = useState("");
    const [postFile, setFile] = useState("");
    const [posts, setPosts] = useState("");
    const [type, setType] = useState("");
    const [width, setWidth] = useState(0);
    //read the file and decode it
    const getFile = (e) => {
        console.log('set:',e)
     
        setType(e[0].type)
      
        let reader = new FileReader();
      
        reader.readAsDataURL(e[0]);
       
        reader.onload= (e) => {
            setFile(reader.result);
        }
    }
  
    const deletePost = async(id) => {
        console.log(id);
        db.posts.delete(id);
        let allPosts = await db.posts.toArray();
        //set the posts
        setPosts(allPosts);
    }
    let post = {
        title: postTitle,
        content: postContent,
        file: postFile,
        type: type,
        width:width
    }

    //submit 
    const getPostInfo = (e) => {
        e.preventDefault();
        if(postTitle !== "" && postContent !== "" && postFile !== ""){
           
            db.posts.add(post).then(async() => {
                //retrieve all posts inside the database
                let allPosts = await db.posts.toArray();
                //set the posts
                setPosts(allPosts);
            });
            
        }
        
        
    }

    useEffect(() => {

        //get all posts from the database
        const getPosts = async() => {
            let allPosts = await db.posts.toArray();
            setPosts(allPosts);
        }
        getPosts();
  
    }, [])

    let postData;
   
    if(posts.length > 0) {
       
        var image = document.createElement('img');
       
        postData = <div className="postsContainer">
                    {
                        posts.map(post => {
                                                     return <div className="post" key={post.title}>
                                        <div style={{backgroundImage: "url(" + post.file + ")" }} />
                                     
                                            <h2>{post.title}</h2>
                                            <p>{post.content}</p>
                       
                        <p onClick={() => console.log(post.width)}>Width:{post.width}</p>
                                            <button className="delete" onClick={() => deletePost(post.title)}>Delete</button>
                                        </div>       
                        })
                    }
                   </div>
    }else{
        postData = <div className="message">
                     <p>There are no posts to show</p>
                   </div>
    }

    return (
    <React.Fragment>
        <form onSubmit={getPostInfo}>
           <div className="control">
           <label>Title</label>
            <input type="text" name="title"  onChange={e => setTitle(e.target.value)} />
           </div>
           <div className="control">
           <label>Content</label>
            <textarea name="content"  onChange={e => setContent(e.target.value)} />
           </div>
           <div className="control">
            <label htmlFor="cover" className="cover">Choose a file</label>
            <input type="file" id="cover" name="file"  onChange={e => { 
                             getFile(e.target.files)}} />
           </div>
            
            <input type="submit" value="Submit" />
        </form>
        <p>WIDTH:{post.width}</p>
      
       <div>
        {postData}
         </div>
    </React.Fragment>
  );
}

export default Main;