如何从 ReactJS 上使用 useState 挂钩创建的状态变量创建静态变量？

Question

我正在尝试获取 useState 挂钩变量的值，而无需在 useState 变量更新时挂钩该新变量（避免在 stateVariable 值更改时更新 newVariable 值）。

例如，我有两个组件，App 和 Edit。

App.js

...
import Edit from './edit'
...
function App() {
  const [user, setUser] = useState({ name: "", password: "" });
  ...
   return(
  ...
    <Route path="/edit">
     <Edit
       socketConnected={socketConnected}
       socket={socket}
       user={user}
       setUser={setUser}
     ></Edit>
    </Route>
  ...
   );
}

Edit.js

function Edit(props) {
    const [user, setUser] = [props.user, props.setUser];
    const previousName = user.name; // Check this out.
    ...
    return (
     <label>Your previous name was: {previousName}</label>
     <input value={user.name} onChange={(e) => { setUser({ ...user, name: e.target.value }) }}></input>
    );
}

这样我应该能够实时更改变量 user，并让 previousName 保持不变，这样用户就可以看到它以前的名称而无需更新。

好吧，我在将 user.name 的值分配给 previousUser 时尝试了以下操作：

const previousName = user.name;
const previousName = user.name.toString();
const previousName = JSON.parse(JSON.stringify(user.name));
let userCloned = Object.assign({}, user); const previousName = userCloned.name;
let userCloned = { ...user }; const previousName = userCloned.name;
let userCloned = { ...user }; const previousName = userCloned.name; Object.freeze(previousName);

我不知道该怎么做，因为无论我如何将状态值分配给普通变量，即使在 JSON 解析之后，它仍然会喜欢 setUser 挂钩，这让我很兴奋疯了，我运行没主意了。

如有任何帮助，我们将不胜感激。

Answer 1

如果我理解正确的话，您基本上是想将 user.name 属性复制到某个变量，这样以后对 props.user.name 的更新将被该变量忽略。在这种情况下，您必须将该道具复制到状态变量：

 // inside Edit   
 const [previousName, setPreviousName] = useState(props.user.name);

这样 previousName 将在该组件首次安装时使用 props.user.name 进行初始化。此状态变量将忽略 props.user.name 的进一步更新。

只有当你卸载Edit组件并再次安装时，它才会将props.user.name再次复制到previousName。

PS 或者，在我的示例中，您可以使用 useRef 而不是 useState

Answer 2

This is the best usecase of useRef because, useRef will keep a hold of the first instance/data that it will ever get and will never change it through out the life-cycle of the app unless been manually updated(ref.current).

 const [user, setUser] = useState({ name: "", password: "" });
 const prevUsername = useRef(user.name);

Nota bene: if you also want to get hold of the previous prop just like componentDidUpdate previusProps before doing some update, also note that; if setUser gets dispatched with new data, you need to update the prevUsername ref/variable. You can do that like this:

setUser((prevUser)=>{ 
 //here you get the previous user before updating
 prevUsername.current = prevUser.name;
 })

如何从 ReactJS 上使用 useState 挂钩创建的状态变量创建静态变量？

How to create a static variable from a state variable made with useState hook on ReactJS?

javascript

reactjs

use-state