javascript - react怎么改变state中object？

问题描述

问 题

constructor(props){
    super(props);
    this.state = {
        postdata : {},
        errormess : '' 
    }
    this.savedata = this.savedata.bind(this);
}

closeSlide(){
    this.props.callbackParent();
}

// 费用类型
handleType(e){
    let value = e.target.value;
    this.setState( Object.assign({},this.state.postdata,{ type: value }) )
    // this.setState({
    //     postdata : {
    //         type : value
    //     }
    // })
}

// 产生费用时间
handleDate(e){
    let value = e.target.value;
    this.setState( Object.assign({},this.state.postdata,{ date: value }) )
    // this.setState({
    //     postdata : {
    //         date : value
    //     }
    // })
}

// 费用金额
handleMoney(e){
    let value = e.target.value.trim();
    this.setState( Object.assign({},this.state.postdata,{ money: value }) )
    // this.setState({
    //     postdata : {
    //         money : value
    //     }
    // })
}

// 费用由来
handleDesc(e){
    let value = e.target.value.trim();
    this.setState( Object.assign({},this.state.postdata,{ desc: value }) )
    // this.setState({
    //     postdata : {
    //         desc : value
    //     }
    // })
}

savedata(){
    console.log(this.state.postdata);
}

最后保存提交的postdata并没有保存这四个字段

constructor(props){
    super(props);
    this.state = {
        postdata : {
            type : '',
            date : '',
            money : '',
            desc :'',
        },
        errormess : '' 
    }
    this.savedata = this.savedata.bind(this);
}

closeSlide(){
    this.props.callbackParent();
}

// 费用类型
handleType(e){
    let value = e.target.value;
    this.setState({
        postdata: Object.assign({},this.state.postdata,{type: value})
    })
}

// 产生费用时间
handleDate(e){
    let value = e.target.value;
    this.setState({
        postdata: Object.assign({},this.state.postdata,{date: value})
    })
}

// 费用金额
handleMoney(e){
    let value = e.target.value.trim();
    this.setState({
        postdata: Object.assign({},this.state.postdata,{money: value})
    })
}

// 费用由来
handleDesc(e){
    let value = e.target.value.trim();
    this.setState({
        postdata: Object.assign({},this.state.postdata,{desc: value})
    })
}

savedata(){
    console.log(this.state.postdata);
}

解决方案

setState(object nextState[, function callback])

合并 nextState 和当前 state。不是立即生效，而是在 render 执行后更新 state

初始 state

{
    postdata: {},
    errormess: ""
}

每次执行 setState 其实是 {type: xxx}, {value: xxx} ··· 这些对象与初始 state 合并。而不是合并到了 postdata 上。

this.setState({postdata: Object.assign(...)})

可以这样调用试试

这篇关于javascript - react怎么改变state中object？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！