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

}