Reep“obj”在調度時是只讀的

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初始化為狀態的副本。