Редактирование ввода React Redux возвращает сообщение об ошибке неконтролируемого ввода

Question

React Redux редактирование ввода формы возвращает сообщение об ошибке неконтролируемого ввода

Ниже код использует реагирует на редукцию для отображения записи в форме ввода из базы данных и ееработал нормально.когда я пытался отредактировать ввод формы для фамилия , он не редактировался, а отображал ошибку

Компонент изменяет неконтролируемый ввод текста типа для управления.Входные элементы не должны переключаться с неуправляемых на управляемые (или наоборот).Выберите между использованием контролируемого или неконтролируемого элемента ввода для времени жизни компонента.

Вот как отображается результат, который я хочу отредактировать, в виде ввода

<input type="text" className="form-control" value={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>  



      handleChange = (name) => (event) => {
   this.setState({ [name]: event.target.value });
}

/*
handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
*/            

ниже приведен полный ответный избыточный код

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { userActions } from '../_actions';

class Edit1 extends React.Component {



constructor(props) {
        super(props);

this.state = {
name: '',
lastName: '',

        };
        this.handleSubmit = this.handleSubmit.bind(this);  


        this.handleChange = this.handleChange.bind(this);

    }

    componentDidMount() {    
this.props.dispatch(userActions.getAll_Rec());


    }

handleChange = (name) => (event) => {
   this.setState({ [name]: event.target.value });
}

/*
handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
*/




    handleSubmit(event) {
        event.preventDefault();

       //process form submit
    }







    render() {
        const { pg1, pgs1 } = this.props;
        return (




 <div className="list">
                <div >

Name: {pgs1.items1 &&  this.props.pgs1.items1[0].lastName}<br />

<input type="text" className="form-control" value={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>                     

            </div>

</div>

        );
    }
}



function mapStateToProps(state) {
    const { pgs1 } = state;
    const { pg1 } = state;
    return {
        pg1,
        pgs1
    };
}


const connectedEdit1 = connect(mapStateToProps)(Edit1);
export { connectedEdit1 as Edit1 };

Answer 1

Наконец, что решило мою проблему отсутствия редактирования формы ввода, так это заменой значения ввода формы {} параметром defaultValue {}.Я использую решения / ответы, опубликованные Соланки здесь Тип ввода ввода не редактируется

Не это больше

<input type="text" className="form-control" value={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>  

, но это решает мою проблему

<input type="text" className="form-control" defaultValue={pgs1.items1 && this.props.pgs1.items1[0].lastName}  onChange={this.handleChange}/>  

С реализацией defaultValue {} теперь я могу редактировать значения формы все время.