TypeError: Cannot read property 'name' of undefined error in a controlled-component

Question

我试图通过受控组件获取用户输入的日期，但总是运行进入此错误 "TypeError: Cannot read property 'name' of undefined"。这是导致错误的代码段。我正在使用 react-datepicker 模块来获取日期输入，因为当我尝试使用 HTML 输入时 type="date" 我无法禁用以前的日期。

import React, {Fragment,useState,useEffect} from 'react';
import {Link,withRouter} from 'react-router-dom';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import PropTypes from 'prop-types';
import {connect} from 'react-redux'; 
import {addTask} from '../../actions/task';
import { addDays } from 'date-fns';

const TaskForm = ({addTask}) => {
    const [formData,setFormData] = useState({
        description:'',
        due_at:'',
        toBeReminded:''
    })

    const onSubmit = e => {
        e.preventDefault();
        addTask(formData);
    }

    const onChange = e=>setFormData({...formData, [e.target.name]:e.target.value})
    const {description,due_at} = formData;
    return (
        <Fragment>
            <h1 className="large text-primary">
                New Task
            </h1>
            <form className="form my-1" onSubmit={e=>onSubmit(e)}>
                <div className="form-group">
                    <label htmlFor="descr">Description:</label><br/>
                    <input type="text" id="descr" placeholder="Task Description" name="description" value={description} onChange={e=> onChange(e)}/>
                </div>
                <div className="form-group">
                    <label htmlFor="due_date">Due Date for Task:</label><br></br>
                    <DatePicker id="due_date" minDate={addDays(new Date(), 1)} id="due_date" name="due_at" value={due_at} onChange={e=> onChange(e)} />
                </div>
                <div className="form-group">
                    <label htmlFor="reminder">Set Reminder:</label><br></br>
                    <input type="radio" id="yes" name="toBeReminded"  value="true" onClick={e=> onChange(e)}/>
                    <label htmlFor="yes">Yes</label><br/>
                    <input type="radio" id="no" name="toBeReminded" value="false" onClick={e=> onChange(e)}/>
                    <label htmlFor="no">No</label><br></br> 
                </div>
                <input type="submit" className="btn btn-dark my-1" value="Submit" />
                <Link className="btn btn-light my-1" to="/tasks">Go Back</Link>
            </form>
        </Fragment>
    )
}

TaskForm.propTypes = {
    addTask:PropTypes.func.isRequired
}

export default connect(null,{addTask})(TaskForm);

Answer 1

查看 react-datepicker 的文档，它看起来不像是它的 onChange 收到事件，而是日期。

您应该为日期更改处理程序使用单独的处理程序，因为它们需要不同的签名。

const onChange = e => setFormData({...formData, [e.target.name]:e.target.value})
const onDateChange = date => setFormData({...formData, due_at: date})

如果您真的想坚持使用一个更改处理程序，还有很多其他解决方案都可以使用，但我建议您像上面那样创建两个。

但是..你可以这样做（我真的不推荐这样做）：

const onChange = e => {
  if (typeof e === 'object') {
    setFormData({...formData, [e.target.name]:e.target.value})
  } else {
    setFormData({...formData, due_at: e})
  }
}

或者因为您已经声明了新的内联函数（顺便说一句，这是不必要的，只要做 onChange={onChange} 除非您使用以下方法），您可以这样做：

const onChange = (name, value) => setFormData({...formData, [e.target.name]:e.target.value})

// Regular inputs
onChange={e => onChange('input name', e.target.value)}

// Date input
onChange={date => onChange('input name', date)}

底线是：您必须注意 onChange 预计会收到什么。它会根据输入类型或库实现而有所不同。

TypeError: Cannot read property 'name' of undefined error in a controlled-component

TypeError: Cannot read property 'name' of undefined error in a controlled-component

javascript

datepicker

reactjs

redux

controlled-component