onChange正在重置状态- useState

Question

我对ReactJs并不陌生，但不知何故，当我console.log在我的组件函数中显示已经设置的属性也被重置。下面是我的完整功能组件

import React, { useState } from 'react';
import {
Grid, Typography, Paper, TextField,
} from '@material-ui/core';
import Autocomplete from '@material-ui/lab/Autocomplete';
import SomeComponent from '../../common/SomeComponent';
import countries from '../../utils/countries_data';
import AlertMsg from '../../utils/Alert';
import { MarkRequired } from '../style';
const App = ({ classes, handleNext, handlePay }) => {
const [contact, setContact] = useState({
firstName: '',
lastName: '',
address1: '',
});
const handleChange = (e) => setContact({
...contact,
[e.target.name]: e.target.value,
});
console.log('above splitAddressProperties', contact);
const splitAddressProperties = (data) => {
console.log('func start', contact);
const country = countries.filter(
(count) => count.alpha2 === data.country_code || count.alpha3 === data.country_code,
);
setContact({
...contact,
address1: data.address,
city: data.city,
zip: data.zip,
country: country[0],
});
console.log('func end', contact);
};

return (
<Grid item xs={12}>
<Paper className={classes.paper}>
<Typography className={classes.inputText}>Contact Information</Typography>
<Grid container style={{ marginBottom: '15px' }}>
<Grid item xs={6} style={{ paddingRight: '10px' }}>
<Typography className={classes.inputTitle}>
First Name
<MarkRequired>*</MarkRequired>
</Typography>
<input
className={classes.inputsty}
value={contact.firstName}
onChange={handleChange}
type="text"
name="firstName"
/>
</Grid>
<Grid item xs={6} style={{ paddingLeft: '10px' }}>
<Typography className={classes.inputTitle}>
Last Name
<MarkRequired>*</MarkRequired>
</Typography>
<input
className={classes.inputsty}
value={contact.lastName}
type="text"
onChange={handleChange}
name="lastName"
/>
</Grid>
</Grid>
<Grid style={{ marginBottom: '15px' }}>
<Typography className={classes.inputTitle}>
Address
<MarkRequired>*</MarkRequired>
</Typography>
<SomeComponent
className={classes.inputsty}
value={contact.address1}
onChange={splitAddressProperties}
/>
</Grid>

</Paper>
</Grid>
);
};
export default App;

如果我输入名字和姓氏并输入SomeComponent值，则触发splitAddressProperties，但它显示联系人的值与默认值相同。需要注意的是console.log('above splitAddressProperties'， contact);当输入名字和姓氏时触发两次。

Answer 1

这些信息不足以真正找到问题，但我猜SomeComponent存储并使用了onChange prop的旧引用。

例如:

const SomeComponent = (props) => {
// ...
const innerOnChange = useCallback(
(data) => {
props.onChange(data);
}, 
// Note that the deps array doesn't have onChange:
[]
);
// ...
}

我要做的是从setState:

访问当前联系人

setContact(currentContact => ({
...currentContact,
address1: data.address,
city: data.city,
zip: data.zip,
country: country[0],
}));

setContact的引用永远不会改变，它总是给你当前的接触对象。(但最好修复SomeComponent)