时间戳

首页 > 解决方案 > 如何使用 React hooks 在 todo 中提交数据

reactjs - 如何使用 React hooks 在 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>
        )
  
}

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

标签： reactjsreact-hooksjsx

解决方案

const handleSubmit = useCallback(() => { 
  saveMessages([
    ...messages,
    {
      message: post,
      title: title,
    },
  ]);
}, [messages, post, title]);

更新

更正确地将更新函数传递到您的saveMessages方法中：

const handleSubmit = useCallback(() => { 
  saveMessages((prevMessages) => [
    ...prevMessages,
    {
      message: post,
      title: title,
    },
  ]);
}, [post, title]);

推荐阅读