Проблема с текстовой областью в reactJS: компонент изменяет управляемый ввод типа undefined на неконтролируемый

Question

Мой код следующий -

Home. js

import React from 'react'
import AddNewTask from './../components/addNewTask'

class Home extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            addNewTask:{
                title:'',
                discription:'',
                deadline:new Date()
            },
        }

        this.handleNewTaskChange = this.handleNewTaskChange.bind(this)

    }

    handleNewTaskChange(event){
        //console.log(typeof(event))
        var evName,evValue;
        if(event.target){
        const{name,value} = event.target
        console.log(name,value)
        evName = name
        evValue = value
        }
        else{
            evName = "deadline"
            evValue = event
        }
        //console.log(evName,evValue)
        this.setState({
            addNewTask:{
                [evName]:evValue
            }
        })

    }
    render(){
         return(
             <div>
                        <AddNewTask 
                        newTask = {this.state.addNewTask}
                        handleChange = {this.handleNewTaskChange}
                        />
            </div>
        )
    }
}

addNewTask. js

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function AddNewTask(props) {
  return (
    <div>
      <form>
        <label>Task : </label>
        <input
          name='title'
          placeholder='Enter Task'
          value={props.newTask.title}
          onChange={props.handleChange}
        />
        <br />
        <label>Discription : </label>
        <textarea
          name='discription'
          placeholder='Enter Task Discription'
          value={props.newTask.discription}
          onChange={props.handleChange}
        />{' '}
        <br />
        <label>Deadline : </label>
        <DatePicker
          name='deadline'
          selected={props.newTask.deadline}
          onChange={(date) => props.handleChange(date)}
          minDate={new Date()}
        />
      </form>
    </div>
  );
}

export default AddNewTask;

Я получил эту ошибку -

index. js: 1 Предупреждение: компонент изменяет управляемый ввод текста типа на неконтролируемый. Элементы ввода не должны переключаться с контролируемого на неуправляемый (или наоборот). Выберите между использованием контролируемого или неконтролируемого элемента ввода на протяжении всего срока службы компонента. Подробнее: https://reactjs.org/docs/forms.html#controlled -компоненты

Кроме того, я еще не добавил функцию отправки.

Answer 1

проблема здесь

<textarea   name="discription"
                                placeholder = "Enter Task Discription"
    // this value at first was '' and later became undefined which is what caused the warning
                                value = {props.newTask.discription}
                                onChange = {props.handleChange}
                    />

Проблема вызвана тем, что при установке описания состояния становится неопределенным

 handleNewTaskChange(event){
        //console.log(typeof(event))
        var evName,evValue;
        if(event.target){
        const{name,value} = event.target
        console.log(name,value)
        evName = name
        evValue = value
        }
        else{
            evName = "deadline"
            evValue = event
        }
        //console.log(evName,evValue)
        this.setState({
            addNewTask:{
                [evName]:evValue
            }
        })

    }

это должно быть

handleNewTaskChange(event){
        const description = event.target.value;

        this.setState(prvState => ({
            addNewTask:{
                ...prvState.addNewTask,
                description
            }
        }))

    }