你好,我正试图为我的一个react组件编写单元测试,但我一直得到相同的错误TypeError.Cannot读取未定义的属性'name'。Cannot read property 'name' of undefined. 我把我的状态作为 defaultValue
并用 ''
. 我所有的测试与 shallow
都失败了。
这是我的文件。
const EditProfileContainer = () => {
const dispatch = useDispatch();
React.useEffect(() => {
dispatch(getProfileDataAction());
}, [dispatch]);
const profileReducer = useSelector(
(state) => state.profileReducer.profileData,
);
const [name, setNewName] = React.useState('');
const [phone, setNewPhone] = React.useState('');
const handleNewName = (event) => {
setNewName({ [event.target.name]: event.target.value });
};
const handlenewPhone = (event) => {
setNewPhone({ [event.target.name]: event.target.value });
};
const handleProfileSubmit = (event) => {
event.preventDefault();
dispatch(editProfileAction(name, phone));
};
return (
<EditProfile
onNameChange={handleNewName}
onPhoneChange={handlenewPhone}
onProfileSubmit={handleProfileSubmit}
profileState={profileReducer}
/>
);
};
export default EditProfileContainer;
我是这样使用 profileState
支持。
const EditProfile = ({
onNameChange, onPhoneChange, onProfileSubmit, profileState,
}) => (
<>
<p className='account-title'>ACCOUNT DETAILS</p>
<Card className='registery-card mb-5'>
<Card.Body>
<Form className='password-form' onSubmit={onProfileSubmit}>
<Form.Group controlId='formBasicProfile'>
<Form.Label className='password-label'>
Name
</Form.Label>
<Form.Control
size='sm'
type='text'
placeholder='Enter Name'
name='name'
defaultValue={'' || profileState.name}
pattern={`${pattern}`}
title='First name or Last name must contain at least three characters'
className='password-text-field'
onChange={onNameChange}
/>
</Form.Group>
<Form.Group controlId='formBasicProfilePhone'>
<Form.Label className='password-label'>
{' '}
Phone
</Form.Label>
<Form.Control
size='sm'
type='number'
placeholder='New Phone number'
defaultValue={'' || profileState.phone}
name='phone'
className='password-text-field'
onChange={onPhoneChange}
/>
</Form.Group>
<Button
variant='primary'
type='submit'
className='register-btn d-inline float-right mt-3'
onSubmit={onProfileSubmit}
>
Save
</Button>
</Form>
</Card.Body>
</Card>
</>
);
export default EditProfile;
这是错误的
TypeError: Cannot read property 'name' of undefined
23 | placeholder='Enter Name'
24 | name='name'
> 25 | defaultValue={'' || profileState.name}
| ^
26 | pattern={`${pattern}`}
27 | title='First name or Last name must contain at least three characters'
28 | className='password-text-field'
的 profileState
对象是 undefined
因此,试图访问其 name
prop会抛出一个错误。你可以显式地检查它是否存在,也可以为 profileState
或者使用类似于可选链的东西。profileState?.name