时间戳

首页 > 解决方案 > 保持一切同步

reactjs - 保持一切同步

问题描述

我有一个来自数据库的用户列表

const [users, setUsers] = useState([]);
database.getUsers.then(users => setUsers(users))

我将其打印在一个简单的列表中，当我单击每个列表时，我会呈现一个表单以更新名称

const [user, setUser] = useState({});
database.getUser(userId).then(user => setUser(user))

useEffect(() => {

    // I need to implement debounce or something like that here. any suggestions are welcome;)
    database.saveUser(userId, user).then(user => console.log(user.name + 'saved!'))

}, [user])

<input value={ user.name } onChange={(e) => setUser({...user, name: e.target.value})} />

我的问题是：如何让用户更新我刚刚在一个特定用户中更新的名称？

标签： reactjs

解决方案

对于您的问题，最好编写如下代码：

const [user, setUser] = useState({});


useEffect(() => {
   fetchUserInfo()
}, [])

const fetchUserInfo = () => {
  database.getUser(userId).then(user => setUser(user))
}

const changeHandler = e => {

    setUser({...user, name: e.target.value});
    database.saveUser(userId, user).then(user => console.log(user.name + 'saved!'))

}

<input value={ user.name } onChange={changeHandler}/>

这样，当您输入用户名时，您的数据库将与您的表单同步。

推荐阅读