TypeError: Невозможно прочитать свойство 'name' неопределенной ошибки в Control-компоненте - PullRequest
Новая
       45

TypeError: Невозможно прочитать свойство 'name' неопределенной ошибки в Control-компоненте

0 голосов
/ 18 февраля 2020

Я пытаюсь получить дату в качестве пользовательского ввода через управляемый компонент, но всегда сталкиваюсь с этой ошибкой «Ошибка типа: Невозможно прочитать свойство« имя »из неопределенного». Это кусок кода, который вызывает ошибку. Я использую модуль react-datepicker для получения ввода Date, как при попытке ввода 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);

1 Ответ

1 голос
/ 18 февраля 2020

Глядя на документы для 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. Он будет отличаться в зависимости от типа ввода или реализации библиотеки.

...