使用React挂钩重置为初始状态
我目前正在处理一个注册表单，以下是我的代码片段：
const Signup = () => {
const [username, setUsername] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [passwordConfirmation, setPasswordConfirmation] = useState('')
const clearState = () => {
setUsername('')
setEmail('')
setPassword('')
setPasswordConfirmation('')
}
const handleSubmit = signupUser => e => {
e.preventDefault()
signupUser().then(data => {
console.log(data)
clearState() // <-----------
})
}
return <JSX />
}
export default Signup
每个状态都用于表单的受控输入。
基本上，我想做的是在用户成功注册后，我希望状态返回到初始状态，并清除字段。
在clearState中手动将每个状态设置回空字符串是非常必要的。我想知道React是否有一个方法或函数可以将状态重置回初始值？
共有3个答案
这有一个非常简单的解决方案。您可以更改渲染组件的关键道具。例如，当我们有一个组件进行编辑时，我们可以传递一个不同的键来清除以前的状态。
return <Component key={<different key>} />
我认为投票的答案仍然正确，但最近React发布了新的内置useReducer，用他们自己的话来说，它是
便于在以后响应操作时重置状态
https://reactjs.org/docs/hooks-reference.html#usereducer
它还指出，当你有涉及多个子值的复杂状态逻辑时，或者下一个状态依赖于前一个状态时，它通常更可取。
在投票的答案上使用相同的示例，您可以像这样使用useReucer：
import React, { useReducer } from "react";
const initialState = {
username: "",
email: "",
password: "",
passwordConfirmation: "",
};
const reducer = (state, action) => {
if (action.type === "reset") {
return initialState;
}
const result = { ...state };
result[action.type] = action.value;
return result;
};
const Signup = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const { username, email, password, passwordConfirmation } = state;
const handleSubmit = e => {
e.preventDefault();
/* fetch api */
/* clear state */
dispatch({ type: "reset" });
};
const onChange = e => {
const { name, value } = e.target;
dispatch({ type: name, value });
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>
Username:
<input value={username} name="username" onChange={onChange} />
</label>
</div>
<div>
<label>
Email:
<input value={email} name="email" onChange={onChange} />
</label>
</div>
<div>
<label>
Password:
<input
value={password}
name="password"
type="password"
onChange={onChange}
/>
</label>
</div>
<div>
<label>
Confirm Password:
<input
value={passwordConfirmation}
name="passwordConfirmation"
type="password"
onChange={onChange}
/>
</label>
</div>
<button>Submit</button>
</form>
);
};
export default Signup;
import React, { FC, Reducer, useReducer } from "react";
interface IState {
email: string;
password: string;
passwordConfirmation: string;
username: string;
}
interface IAction {
type: string;
value?: string;
}
const initialState: IState = {
email: "",
password: "",
passwordConfirmation: "",
username: "",
};
const reducer = (state: IState, action: IAction) => {
if (action.type === "reset") {
return initialState;
}
const result: IState = { ...state };
result[action.type] = action.value;
return result;
};
export const Signup: FC = props => {
const [state, dispatch] = useReducer<Reducer<IState, IAction>, IState>(reducer, initialState, () => initialState);
const { username, email, password, passwordConfirmation } = state;
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
/* fetch api */
/* clear state */
dispatch({ type: "reset" });
};
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
dispatch({ type: name, value });
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>
Username:
<input value={username} name="username" onChange={onChange} />
</label>
</div>
<div>
<label>
Email:
<input value={email} name="email" onChange={onChange} />
</label>
</div>
<div>
<label>
Password:
<input
value={password}
name="password"
type="password"
onChange={onChange}
/>
</label>
</div>
<div>
<label>
Confirm Password:
<input
value={passwordConfirmation}
name="passwordConfirmation"
type="password"
onChange={onChange}
/>
</label>
</div>
<button>Submit</button>
</form>
);
};
请注意，我创建了这个reducer函数const，使其尽可能通用，但您可以完全更改它，测试不同的操作类型（而不仅仅是状态属性名称），并在返回修改后的状态之前执行复杂的计算。上面提供的链接中有一些示例。
遗憾的是，没有内置的方法将状态设置为初始值。
您的代码看起来不错，但是如果您想减少所需的函数，您可以将整个表单状态放在一个状态变量对象中，并重置为初始对象。
const { useState } = React;
function signupUser() {
return new Promise(resolve => {
setTimeout(resolve, 1000);
});
}
const initialState = {
username: "",
email: "",
password: "",
passwordConfirmation: ""
};
const Signup = () => {
const [
{ username, email, password, passwordConfirmation },
setState
] = useState(initialState);
const clearState = () => {
setState({ ...initialState });
};
const onChange = e => {
const { name, value } = e.target;
setState(prevState => ({ ...prevState, [name]: value }));
};
const handleSubmit = e => {
e.preventDefault();
signupUser().then(clearState);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>
Username:
<input value={username} name="username" onChange={onChange} />
</label>
</div>
<div>
<label>
Email:
<input value={email} name="email" onChange={onChange} />
</label>
</div>
<div>
<label>
Password:
<input
value={password}
name="password"
type="password"
onChange={onChange}
/>
</label>
</div>
<div>
<label>
Confirm Password:
<input
value={passwordConfirmation}
name="passwordConfirmation"
type="password"
onChange={onChange}
/>
</label>
</div>
<button>Submit</button>
</form>
);
};
ReactDOM.render(<Signup />, document.getElementById("root"));<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>-
问题内容： 我目前正在使用注册表单，以下是我的代码段： 每个状态都用于表格的受控输入。 本质上，我想做的是在用户成功注册后，希望状态恢复为初始状态，并清除字段。 手动将每个状态设置为空字符串是非常必要的，因为我想知道React是否附带有一种方法或函数可以将状态重置为初始值？ 问题答案： 遗憾的是，没有内置的方法可以将状态设置为其初始值。 您的代码看起来不错，但是如果您想减少所需的功能，则可以将整个
-
我正在使用React-useState创建状态为的对象。在成功调用API后，将更新为数据对象。 我有一个表单可以更改此状态，但我还有一个取消按钮。单击“取消”时，如何将此状态恢复为其初始值（API调用后）？ 我应该创建另一个状态变量和存储初始状态在那里，然后更新我的状态基于？
-
我试图设置一个基本的喜欢项目，类似于facebook喜欢当页面第一次呈现时是黑色的颜色，然后使用React钩子，useState（）和use效应（）来改变喜欢状态变化时的颜色。然而，我已经得到了渲染的颜色，但是它也在加载渲染，所以当用户点击“喜欢”并改变喜欢状态时，不会从黑色变成绿色。 所以，我想要类似的初始颜色
-
问题内容： 根据文档： 更新发生后立即调用。初始渲染不调用此方法。 我们可以使用新的钩子来模拟，但似乎在每次渲染后都被运行，即使是第一次也是如此。如何使它不在初始渲染上运行？ 如您在下面的示例中看到的那样，它是在初始渲染期间打印的，但在初始渲染期间没有打印的。 问题答案： 我们可以使用该钩子来存储我们喜欢的任何可变值，因此我们可以使用它来跟踪函数是否是第一次运行。 如果我们希望效果在与该效果相同的
-
我正在尝试使用状态将一个表单输入值复制到另一个表单输入值，但状态没有更新 我创建了一个带有按钮的表单，其中左侧表单输入的值应复制到右侧表单输入。这是我的代码： 无论我做什么，dbSecName的状态都不会改变。我试着设置一个新的常量。我尝试使onclick函数异步并等待。如果我为我试图设置的变量的值添加，我可以正确地看到它，但是dbSecName的console.log总是显示原始值。 我真的不知
-
问题内容： 我正在尝试新的React Hooks，并有一个带有计数器的Clock组件，该计数器应该每秒增加一次。但是，该值不会增加到超过一。 问题答案： 原因是传递给的闭包中的回调仅访问第一个渲染器中的变量，而无法访问后续渲染器中的新值，因为第二次未调用。 回调中的值始终为0 。 就像您熟悉的状态挂钩一样，状态挂钩有两种形式：一种是处于更新状态的状态，另一种是将当前状态传入的回调形式。您应该使用第