在react useEffect上卡住了

Question

我正在react中创建一个表单构建器。在一个简单的文本字段中，我需要:

1. ChangecurrentValue
2. 当currentValue改变时，验证它
3. 验证完成后，触发一个事件(有效或无效)

这是我的代码:

const TextInput = ({ props }) => {
const [currentValue, setCurrentValue] = useState(props.initialValue);
const [validationState, setValidationState] = useState(false);

const validate = () => {
if (!currentValue) {
setValidationState(false);
}
else {
setValidationState(true);
}
}
useEffect(() => {
validate();
}, [currentValue]);
useEffect(() => {
emitter.emit('textInputChange', { currentValue, validationState});
}, [validationState]);
}

然而，我现在有这个问题，如果我只依靠validationState发射变化，一旦TextInput有效，发射停止。我需要在每次更改时发出

但是如果我也依赖currentValue，那么由于validationState不同步，我可以得到无效状态。换句话说，currentValue可能是有效的，但我从先前未更新的validationState发出invalid。

我该如何解决这个问题?

Answer 1

我认为你不需要状态validationState，只需更新一个useEffect:

const validate = (value) => {
if (!value) {
return false;
}
return true;
};
useEffect(() => {
const isValid = validate(currentValue);
emitter.emit("textInputChange", { currentValue, validationState: isValid });

}, [currentValue]);