Реагировать "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 как копию состояния.