使用受控组件和非受控组件更新文本区域中的状态

Question

我正在尝试更新注释，并同时具有输入和文本区域。我可以在输入中更新状态。但是，在我的文本区域中只会更新一个附加字符。我知道这与textarea是受控制的组件并采用value属性而不是defaultValue属性有关。但是，我似乎无法弄清楚自己在做错什么。

export default class UpdateNote extends Component {
    constructor(props) {
        super(props);
        this.state = {
            note: {},
        };
        this.handleChange = this.handleChange.bind(this);
    }

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

    submitHandler = (e) => {
        e.preventDefault();
        const note = {
            title: this.state.title,
            textBody: this.state.textBody,
        };
        const id = this.props.match.params.id;
        axios
            .put(`${URL}/edit/${id}`, note)
            .then(response => {
                this.setState({ title: '', textBody: '' })
                this.setState({ note: response.data })
            })
            .catch(error => {
                console.log(error)
            })
    }

    render() {
        return (
            <div className="notes-list">
                <h2 className="your-notes">Edit Note:</h2>
                    <form className="input-form" onSubmit={this.submitHandler} >
                        <input type="text" defaultValue={this.state.note.title} name="title" onChange={this.handleChange} />
                        <textarea type="textarea" value={this.state.note.textBody} name="textBody" onChange={this.handleChange} />
                        <button type="submit" className="submit-button">Update</button>
                    </form>
            </div>
        )
    }
}