javascript - 在React中设置状态

我的react组件上有以下状态变量：

this.state = {
  application: {
    institutions: [{
     "name":null
    }]
  }
}

我想设置变量名称的状态，而我所做的是：

handleChangeInstitution(event,indexInstitution){

    const institutions = [...this.state.application.institutions]

    institutions[indexInstitution] = {
        ...institutions[indexInstitution],
        [event.target.name]: event.target.value
    }

    this.setState(prevState => ({
        ...prevState,
        application: {
            ...prevState.application,
            institutions: [
                ...institutions,
            ]
        }
    }))

}

这工作得很好，但是当我在输入框中键入内容时，它的速度确实很慢。
有什么方法可以优化它吗？

最佳答案

这是一个更清洁的解决方案。另外，这是更新数组项的非常常见的模式。关于性能，这部分代码无能为力。它不应该关于这部分。

handleChangeInstitution(event,indexInstitution){
    this.setState(prevState => ({
        ...prevState,
        application: {
            ...prevState.application,
            institutions: [
                ...institutions.slice(0, indexInstitution),
                {
                  ...institutions[indexInstitution],
                  [event.target.name]: event.target.value
                },
                ...institutions.slice(indexInstitution + 1),
            ]
        }
    }))

}