javascript - 在 React 中设置状态

Question

我的 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,
            ]
        }
    }))

}

这工作得很好，但当我在输入框中输入内容时它真的很慢。有什么办法可以优化吗？

Answer 1

这是一个更简洁的解决方案。另外，这是一种非常常见的更新数组项的模式。关于性能，您无法从这部分代码中做任何事情。它不应该是关于这部分的。

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),
            ]
        }
    }))

}