React setState参数问题。

#1

#关于React setState方法参数的问题。
如代码注释处1，2所示，我知道这个写法是ES6的简洁写法。可是在this.state这个对象里根本没有text这个属性啊。ES6里面解释到ES6允许在对象中只写属性名，不写属性值。然后属性值等于属性名所代表的变量。当我执行add函数后。this.state.todo却被更改了。而且这段代码只能用这个方式来对this.state.todo进行删除、添加等各种操作。

这个问题是setState这个方法的问题还是我不够理解ES6这种写法。

class Addtodo extends Component{
    constructor(){
        super();
        this.arr = [
            '第一个代办事项',
            '第二个待办事项'
        ];
        this.state = {
            todo:this.arr,
        };
        this.myRefs = React.createRef();
        this.add = this.add.bind(this);
    }
    add(){                                 
        let text =this.arr.push(this.myRefs.current.value);  //1
        this.setState({text});                               //2
    }
    render(){
        const list = this.state.todo;
        const temp = list.map((item)=>
            <Todo text={item}/>  
        );
        return(
            <div>
                <label>
                    <input type="text" ref={this.myRefs} /><input type="button" onClick={this.add} value="添加一个"/>
                </label>
                    {temp}
            </div>
        )
    }
}
#2

求解啊:sob:

#3

你这里的state里都没有text这个字段，注释2肯定是无效的
之所以todo变了，是因为你在初始化时让todo等于了this.arr，然后数组不是基础类型，所以这里拿到的是引用
你在注释1那里改动了this.arr，所以todo变了

1 Like
#4

十分感谢解答。瞬间茅塞顿开。。。。。。。。:grin: