在 reactjs 中编辑数组

Question

我正在尝试在数组中编辑我的列表，但它不起作用。

我正在尝试单输入值更新它可以工作，但我不知道如何 更新数组。

为什么这个方法不起作用，并给出数组编辑的解决方案

我存储了数组中的数据，但它说 [object object] 我能做什么？

state={
    name:'Ajith',
    name1: 'kumar',
    name2 : [],
    changeEdit:false
}

edit = () => {
    this.setState({
        changeEdit : !this.state.changeEdit
    });
    let array = {
        name : this.state.name,
        name1 : this.state.name1
    };
    let Name = this.state.name2;
    Name.push(array);
    this.setState({
        name2 : Name
    })
    console.log(this.state.name2)
}

update = (e) => {
    this.setState({
        changeEdit : !this.state.changeEdit,
        name : this.refs.Edit.value,
        name1 : this.refs.Edit1.value,
        name2 : this.refs.Edit2.value
    })

}

inputEditEvent = (e) => {
    return(
        <div


            <div>
                <input type="text" defaultValue={this.state.name} ref = "Edit" style={{height:'30px'}}/>
                <input type="text" defaultValue={this.state.name1} ref = "Edit1" style={{height:'30px'}}/>
                <input type="text" defaultValue={this.state.name2} ref = "Edit2" style={{height:'30px'}}/>
            </div>
            <div>    
                <Editings cancel={this.edit} update={this.update}/>
            </div>
        </div>
    )
}

editEvent = (e) => {
    return(
        <div>
            <button onClick={this.edit}>
                Edit
            </button>
            <h2>
                {this.state.name}<br/>
                {this.state.name}<br/>
                <br/>
                {this.state.name}
            </h2>
        </div> 
    )
}
render()
{
    return this.state.changeEdit ?
    this.inputEditEvent() : this.editEvent()
}

}

Answer 1

这不是一个数组，是一个对象

let array = {
        name : this.state.name,
        name1 : this.state.name1
    };

这个是一个数组

let array = [
        {name : this.state.name },
        {name1 : this.state.name1 },
    ];

还要注意 setState 是 async：

this.setState({
        name2 : Name // next value
    })
console.log(this.state.name2) // will print previous value

正确记录状态的方式：

this.setState({
        name2 : Name // next state
    },
   () => console.log(this.state.name2) // next state
);