Реакция не может установить двухстороннюю привязку

Question

Вот мои два компонента.Мне просто нужно обновить свое состояние в компоненте входа в систему.Я не уверен, что я делаю не так здесь.Я пытаюсь передать данные об изменении в компонент входа в систему.Данные собираются в e.target.value для каждого символа, но затем он сбрасывает состояние.

Я также пытался переместить userObj внутри состояния, но не работает

    import React, { Component } from 'react';
    import FormHeader from './FormHeader'

    class NonLoggenInForm extends Component {
        render() {

            return (
                <div className="marginTop1 formPanel">
                    <FormHeader label={this.props.label}/>
                        {this.props.content.map((key)=>{
                            return <input type={key.type} 
                                         value = {key.value} 
                                         placeholder = {key.name}
                                         required = {key.required}
                                         onChange = {e=>this.props.onChange(e)}
                                         className = "formInput"
                                         name = {key.name}
                                         key = {key.id}
                                         />;
                                        })}

                        <button  onClick={this.props.onSubmit}> Sign in</button> 

                </div>

            );

        }

      }

      export default NonLoggenInForm;


import React, { Component } from 'react';
import Logo from '../shared/Logo';
import NonLoggenInForm from '../shared/NonLoggenInForm';

class Login extends Component {

    changeHandler = (e) => {
        console.log(e.target.value);
        this.setState({
            [e.target.name] : e.target.value
        });
    }
    loginHandler = (e) => {
        e.preventDefault();
        console.log(this.state);
    }

    render() {
       let  userObj = [
            {
                name : 'userId',
                type: 'text',
                required: true,
                value : '',
                id : 1

            },
            {
                name : 'password',
                type : 'password',
                required : true,
                value : '',
                id : 2

            }
        ];
    return (
            <div className="nonLoggedInPages">
                <Logo/>
                <NonLoggenInForm content={userObj} label="Sign in" onSubmit={this.loginHandler} onChange={this.changeHandler}/>
            </div>

        );

    }

  }

  export default Login;

Answer 1

Переместил пользователь Obj в состояние снова и изменил функцию onChange, как показано ниже

changeHandler = (e) => {
    let objIndex = this.state.userObj.findIndex((ele)=>{
        return ele.name === e.target.name;
    });
    let upadtedObject = [...this.state.userObj];
    upadtedObject[objIndex].value = e.target.value;
    this.setState({
        userObj : upadtedObject
    });
    e.target.value = this.state.userObj[objIndex].value;
}