Reactjs 如何使用react钩子在todo中提交数据

我想用React钩子重构我的todo应用程序， 用户输入标题和消息后，它们将保存在一个数组中

const Messages = () => {
 
   const [messages, saveMessages] = useState([
       {
           title: 'Dan',
           message: 'Hola !'
       }
   ]);

 const [post, setPost] = useState('')
 const [title, setTitle] = useState('')
 
 
const handleSubmit = () => { 
    saveMessages([...messages, post, title])
}

        return (
            <Col lg={9} md={9} sm={12} style={{border: '1px solid grey', paddingTop: '20px'}}>
            <div style={{display: 'flex', justifyContent: 'start', alignItems: 'center'}}>
                <input value={title} onChange={ (e) => setTitle(e.target.value)} className='mr-3 textField' placeholder='your title ...' style={{padding: '5px 5px',  borderRadius: '50px', width: '60%', boxShadow: '0px 4px 16px rgba(17,17,26,0.1), 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1)'}}/>
                <textarea value={post} onChange={ (e) => setPost(e.target.value)} className='mr-3 textField' placeholder='your message ...' style={{padding: '5px 20px',  borderRadius: '50px', width: '60%', boxShadow: '0px 4px 16px rgba(17,17,26,0.1), 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1)'}}/>
                <Button variant="contained" color="primary" onClick={handleSubmit}>
                    Add post
                </Button>
             
            </div>
            <div>
                {/* <Post message={this.state.message} /> */}
                <Post title='Ksena' image='https://i.pinimg.com/originals/cb/7c/6a/cb7c6afd13741ce6a58c1584d8b59097.jpg' message='Hello there !'/>
                <Post title='Josh' image='https://www.pauldavidsmith.co.uk/wp-content/uploads/2019/08/corporate-portraits-peterborough-48-705x529.jpg' message='Welcome !'/>
                {messages.map(i => {
                    return (
                        <Post title={i.title} message={i.message}/>
                    )
                   
                })}
            </div>
            </Col>
        )
  
}

const Messages=（）=>{
const[messages，saveMessages]=useState([
{
标题:"丹",，
留言：“你好！”
}
]);
const[post，setPost]=useState（“”）
const[title，setTitle]=useState（“”）
常量handleSubmit=（）=>{
保存消息（[…消息、帖子、标题]）
}
返回(
setTitle（e.target.value）}className='mr-3 textField'placeholder='your title…'style={填充：“5px 5px”，边框半径：“50px”，宽度：“60%”，boxShadow:'0px 4px 16px rgba（17,17,26,0.1），0px 8px 24px rgba（17,17,26,0.1），0px 16px 56px rgba（17,17,26,0.1）}/>
setPost（e.target.value）}className='mr-3 textField'placeholder='your message…'style={padding:'5px 20px'，borderRadius:'50px'，width:'60%'，boxShadow:'0px 4px 16px rgba（17,17,26,0.1），0px 8px 24px rgba（17,17,26,0.1），0px 16px 56px rgba（17,17,17,26,0.1）}/>
添加帖子
{/*  */}
{messages.map（i=>{
返回(
)
})}
)
}

但它仅在提交后渲染图像（单击“添加帖子”按钮） 我想知道是否应该创建两个钩子/数组来保存消息和标题？

const handleSubmit=useCallback（（）=>{
保存消息([
…信息，
{
留言:post,，
标题:标题,，
},
]);
}，[消息、帖子、标题]；

consthandlesubmit=useCallback（（）=>{
保存消息([
…信息，
{
留言:post,，
标题:标题,，
},
]);
}，[消息、帖子、标题]；

将代码更新为

saveMessages（[…messages，{message:post，title}]）

内部

handleSubmit

为了正确更新状态值，必须使用创建状态值时声明的正确方法，

const[post，setPost]=useState（“”）因此，为了成功地更新say
post
您必须使用
setPost（“…”）
并将代码更新为
saveMessages（[…messages，{message:post，title}]）
内部
handleSubmit
为了正确地更新状态值，您必须使用创建状态值时声明的正确方法，
const[post，setPost]=useState（“”）因此，为了成功更新say
post
您必须使用
setPost（“…”）
等等