React单输入框状态变更致全量重渲染性能问题求助

开发已选商品管理模块时遇到无法自行解决的性能问题：每次输入框值变更时，最多会导致50个组件全量重渲染，出现明显卡顿。

核心数据结构 #

从API获取的商品数据结构如下：

{"img_url": "http://localhost/wp-content/uploads/2022/12/g","productTitle": "Test","productId": "17","inputs": [{"inputTitle": "Text","inputType": "text","inputValue": "Test","id": "133"},{"inputTitle": "SELECT","inputType": "select","inputValues": ["1","2","3","4"],"inputValue": "3","id": "134"}],"inputsValues": [{"inputValue": "Test"},{"inputValue": "3"}],"orderTitle": "MLF-123","unique_id": "1b4b0ad6-b796-4608-bc41-5d6"}

当前输入框变更处理代码 #

输入框的onChange事件用于修改对应inputValue并更新selectedProducts状态，代码如下：

onChange={(event) => {                    
  const selectedProductsCopy = [...selectedProducts];                    
  selectedProductsCopy[selectedProductIndex].inputsValues[                     
    inputIndex                   
  ].inputValue = event.target.value;                   
  setSelectedProducts([...selectedProductsCopy]);                  
}}

性能问题详情 #

每次输入框值变更时，最多会触发50个组件全量重渲染，Profiler重渲染数据截图如下：

若需更多信息，可随时告知。

内容的提问来源于stack exchange，提问作者Alan