在下面的示例中,当我更新某个字段时,我的状态对象中的另一个字段消失/未设置,并且我收到有关输入变得不受控制的警告。下面的例子:
const {useState} = React;
const App = () => {
const [user, setUser] = useState({
firstName: 'Mary',
lastName: 'Poppins',
});
return (
<div>
First Name: <input value={user.firstName} onChange={e => {
setUser({firstName: e.target.value});
}} />
<br />
Last Name: <input value={user.lastName} onChange={e => {
setUser({lastName: e.target.value});
}} />
<br />
{JSON.stringify(user, null, 2)}
</div>
);
};
ReactDOM.render(<App />, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>