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

下面是我个人项目的代码，在这里我可以跟踪我每月的订阅，如果我必须添加订阅，我只需要向现有数组添加一个对象。然而，出于测试目的，当我试图在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;

从“React”导入React；
从“道具类型”导入道具类型；
常量列表=（）=>{
const[mylist，setList]=React.useState（[]）；
const[value，setValue]=React.useState（{subscription:''，startDate:''，paymentTime:0}）；
常量handleSubmit=（e）=>{
console.log（value.startDate）；
setList（mylist.push（value））；
e、 预防默认值（）；
};
常量更改=（事件）=>{
setValue（{[event.target.name]：event.target.value}）；
};
返回(
{mylist.map（（obj）=>
{obj.subscription}
）}
添加项
);
};
//它只是删除了上面的错误。
List.propTypes={
列表：PropTypes.node
};
导出默认列表；

您每次都在替换您的

状态。这可能是因为在理解传统的基于
类
的
反应组件
和
useState
中
setState
之间的差异时出错

您需要将该值附加到现有数据。类似的方法也会奏效

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

基于
类
的组件中的
设置状态
始终接受
部分
状态，并与现有状态合并。而
useState
setter
函数将替换您在相应状态中提供的值。
每次都将替换您的
状态。这可能是因为在理解传统的基于
类
的
反应组件
和
useState
中
setState
之间的差异时出错

您需要将该值附加到现有数据。类似的方法也会奏效

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

基于
类
的组件中的
设置状态
始终接受
部分
状态，并与现有状态合并。而
useState
setter
函数将替换您在相应状态下提供的值。
在
handleChange
函数上，您需要传递
值的旧值

const handleOnChange=（事件）=>{
setValue（{…value[event.target.name]：event.target.value}）；
};
在
handleChange
函数中，您需要传递
value

const handleOnChange=（事件）=>{
setValue（{…value[event.target.name]：event.target.value}）；
};
不要更改属于您的状态的列表和对象。不要更改属于您的状态的列表和对象。