我的反应应用程序中的状态设置为未定义

Question

下面是我的个人项目代码，我可以在其中跟踪我的每月订阅，如果我必须添加订阅，我只需将对象添加到现有数组。 但是，出于测试目的，当我尝试在handleSubmit中控制台.log(value.startDate(时，它给了我未定义并导致进一步的问题。我将如何解决它？

import React from 'react';
import PropTypes from 'prop-types';
const List = () => {
const [ mylist, setList ] = React.useState([]);
const [ value, setValue ] = React.useState({ subscription: '', startDate: '', paymentTime: 0 });
const handleSubmit = (e) => {
console.log(value.startDate);
setList(mylist.push(value));
e.preventDefault();
};
const handleOnChange = (event) => {
setValue({ [event.target.name]: event.target.value });
};
return (
<div>
<div className="for_list">
<ul className="list">{mylist.map((obj) => <li key={obj.subscription}>{obj.subscription}</li>)}</ul>
</div>
<div className="for_form">
<form>
<input type="text" name="subscription" onChange={handleOnChange} value={value.subscription} />
<input type="text" name="startDate" onChange={handleOnChange} value={value.startDate} />
<input type="number" name="paymentTime" onChange={handleOnChange} value={value.paymentTime} />
</form>
</div>
<button onClick={handleSubmit}>Add Item</button>
</div>
);
};
// it just removes the error above.
List.propTypes = {
list: PropTypes.node
};
export default List;

Answer 1

您每次都在更换state。这可能是因为未能理解传统classReact components和useState中setState之间的差异。

您需要将值追加到现有数据。类似的东西会起作用

const handleOnChange = (event) => {
setValue({ ...value, [event.target.name]: event.target.value });
};

基于class的组件中的setState始终接受partial状态并与现有状态合并。而useStatesetter函数将替换您在相应状态下提供的值。

Answer 2

在handleChange函数上，您需要传递旧的值value

const handleOnChange = (event) => {
setValue({ ...value , [event.target.name]: event.target.value });
};