Question

我有一个组件，其中包含一个表单和少量输入。

<ModalField>
    <span>Display Name</span>
    <input type="text" name="displayName" defaultValue={data.props.display_name} onChange={this.handleChange} />
</ModalField>
<ModalField>
    <span>Phone</span>
    <input type="tel" name="phone" defaultValue={data.props.phone} onChange={this.handleChange} />
</ModalField>

每次输入时，它都会使用更新后的值更改状态

handleChange(event) {
    var target = event.target;
    this.setState({
        [target.name]: target.value 
    })
}

当我尝试使用对象提交表单时会发生问题。

handleSubmit(event) {
    event.preventDefault();
    const obj = {};
    obj = this.state;
    obj.username = this.props.location.pathname.split("/").pop();
    this.props.onSubmit(obj);
    this.props.onCancel();
}

这时出现错误Uncaught Error: "obj" is read-only

我该如何解决？尝试了几种不同的方法来构建此对象，但没有一种有效。

Answer 1

这是因为您要将obj初始化为一个常量，然后尝试将其设置为一个值。虽然初始化为常量的对象可以添加更多属性（例如obj.value = test），但常量只能设置一次。您可以做的是const obj = Object.assign({}, this.state)，它将obj初始化为状态副本。

分派时，React“ obj”为只读

1 个答案: