无法将undefined或null转换为object或not length

Question

如果在每个输入中都放一个值，它就能正常工作。但是，即使只有一个输入为空，也会出现错误。nameValue.length，则会出现一个无法处理长度的错误。Object.values(nameValue(.length，则出现错误"无法将未定义或null转换为对象"。

const [values, setValues] = useState({
nameValue: '',
numberValue: '',
contentValue: '',
});
const { nameValue, numberValue, contentValue } = values;
const handleNumber = e => {
const { value, name } = e.target;
setValues({
...values,
[name]: value,
});
};

useEffect(() => {
if (numberValue.length === 11) {
setValues({
numberValue: numberValue.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3'),
});
} else if (numberValue.length === 13) {
setValues({
numberValue: numberValue
.replace(/-/g, '')
.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3'),
});
}
}, [numberValue]);

const handleSend = e => {
e.preventDefault();
//console.log(typeof stringify(nameValue) === 'undefined');
const nameValueTrue =
Object.values(nameValue).length > 4 ||
Object.values(nameValue).length < 1 ||
typeof nameValue !== 'string' ||
typeof nameValue === 'undefined';
const numberValueTrue =
Object.values(numberValue).length < 13 ||
Object.values(numberValue).length > 14;
const contentValueTrue =
typeof contentValue !== 'string' ||
Object.values(contentValue).length < 2;
const error = !e.target.value;
if (nameValueTrue) {
alert('이름을 확인해주세요.');
console.log('name안');
} else if (numberValueTrue) {
console.log('number');
alert('휴대폰번호를 확인해주세요.');
} else if (contentValueTrue) {
console.log('content');
alert('내용을 확인해주세요.');
} else {
goto();
}
};

<ContentBox>
<div>Name</div>
<ContentInput
name="nameValue"
value={nameValue || undefined}
//value={nameValue || ''}
//value={nameValue}
onChange={handleNumber}
/>
</ContentBox>
<ContentBox>
<div>Phone Number</div>
<ContentInput
name="numberValue"
value={numberValue || undefined}
//value={numberValue || ''}
//value={numberValue}
onChange={handleNumber}
/>
</ContentBox>
<ContentBox>
<div>Content</div>
<ContentInput
placeholder="내용 입력."
name="contentValue"
value={contentValue || undefined}
//value={contentValue || ''}
//value={contentValue}
onChange={handleNumber}
/>
</ContentBox>
<Submit onClick={handleSend}>Send</Submit>

Answer 1

在您的useEffect中，您正在将整个values对象覆盖为numberValue。你也需要将对象分散在那里，就像你在handleNumber 中所做的那样