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

【问题标题】：state in my react app get set to undefined我的反应应用程序中的状态设置为未定义
【发布时间】：2020-10-25 21:42:54
【问题描述】：

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

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;

【问题讨论】：

不要改变属于你状态的列表和对象。

标签： reactjs react-hooks state jsx

【解决方案1】：

您每次都在替换您的state。这可能是因为没有理解传统的基于class 的React components 和useState 中的setState 和useState 之间的区别。

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：