代码之家  ›  专栏  ›  技术社区  ›  handsome

this.setState到子对象

  •  1
  • handsome  · 技术社区  · 6 年前

    我想更新用户表单的状态,但是 this.state.data 只返回上次更改的输入

    class User extends Component {
    
        constructor(props) {
            super(props)
    
            this.state = {
                data: ''
            }
        }
    
        handleInputChange(event) {
            const target = event.target
            const value = (target.type === 'checkbox') ? target.checked : target.value
            const name = target.name;
    
            this.setState({ data: {
                [name]: value
            }})
    
            console.log(this.state.data)
    
        }
    }
    
    <input type="text" name="text1" value={this.state.data.text1} onChange={(event) => this.handleInputChange(event)} />
    <input type="text" name="text2" value={this.state.data.text2} onChange={(event) => this.handleInputChange(event)} />
    

    如果我这样做的话就行了

    this.setState({ [name]: value })
    

    我正在向服务发出一个http请求,我只想发送 本州数据 而不是整个 this.state 因为大多数东西对那项服务都是无用的。我只需要表格数据。谢谢您

    1 回复  |  直到 6 年前
        1
  •  1
  •   Cristóbal Soto    6 年前

    对象和数组的行为与基元类型(int、float、string)不同它们是内存中的指针,为了更改和对象的值,需要使用spread运算符创建对象的副本,然后更改该值并将整个新对象传递到如下状态:

    let data = {...this.state.data} //this is the spread operator that copies the data
    const target = event.target
    const value = (target.type === 'checkbox') ? target.checked : target.value
    const name = target.name
    data[name] = value
    this.setState({data: data})
    

    那应该行得通

    在处理对象和数组时,需要小心,问题是您正在为内存中的对象设置两个不同的指针…如果你是一个初学者,你很难理解,但是继续练习并尝试用c语言学习指针。