Question

我正在研究一个项目而且我真的遇到了问题，我正在做一个表单来上传住宅，我正在将数据分配给一个对象，问题是我想创建一个嵌套对象，并且我得到了一些奇怪的错误。

   constructor(props) {
        super(props);
        this.state = {dwelling: new Dwelling()};
    }

    handleChange({target: {id, value}}) {
        console.log(id);
        console.log(value);
        this.setState(
            state => ({
                dwelling: (Object.assign(state.dwelling.spaces, {[id]: value}))
            })
        );
        console.log(this.state.dwelling.spaces.dorms);
    }

    render() {
        const {dwelling} = this.state;
        return (
            <Grid className="animated fadeIn">
                <Row>
                    <Col sm={12}>
                        <h2>Completar <b>Espacios</b></h2>
                        <Row>
                            <Col sm={2}>
                                <FormGroup controlId="dorms">
                                    <ControlLabel>Tipo de Publicación</ControlLabel>
                                    <FormControl
                                        componentClass="select"
                                        value={dwelling.spaces.dorms}
                                        onChange={e => this.handleChange(e)}
                                    >
                                        <option disabled label="Seleccione"/>
                                        <option value="Alquiler" label="Alquiler"/>
                                        <option value="Venta" label="Venta"/>
                                    </FormControl>
                                </FormGroup>

所以在hanlder上我可以访问this.state.dwelling.spaces并显示和对象由2个propiertys宿舍和壁橱组成：数据模型：

export default class Dwelling {
publicationType = '';
address = '';
type = '';
subtype = '';
currency = '';
price = '';

constructor(obj) {
    Object.assign(this, obj);
    this.spaces = {
        dorms: '',
        closets: ''
    };
}

编辑：我改变了数据模型，但现在我将整个对象替换为仅修改子对象的内容

Answer 1

您不会在mvn clean install中将这些变量作为constructor的一部分进行分配，因此您无法访问其中的任何变量。将this课改为此课程应该有效。

Dwelling

constructor() { this.spaces={ dorms: '', closets: '' }; }是一个异步函数。您的this.setState在console.log更新之前运行。要使其与this.state保持同步，请将其作为回调console.log

this.setState

在react中分配嵌套对象

1 个答案: