有没有办法"intercept"反应状态更新，并清理/修剪/...设置之前的值

Question

假设在一个功能组件中有一个状态保存一个字符串;由于此状态从组件中的多个位置更新，是否可能"拦截"?所有的更新，并总是执行一些操作，如修剪值设置之前?在这里使用useReducer会更好吗?

Answer 1

您将为此创建一个可重用的函数，并将其应用于需要的地方:

const [name, setName] = useState('');
const updateName = (value) => {
// do some validation (like avoid numbers)
if(value.match(/[0-9]+/)) return
// some normalize
setName(value.trim());
}
return (
<>
<label for="name">Name</label>
<input id="name" value={name} onChange={e => updateName(e.target.value)} />
<button onClick={() => updateName('C3P0')}>Try droid name</button>
</>
)

或者使用一些内置验证的特定库，如yup