Javascript 反应：更新阵列时观察到的延迟

我在输入方面遇到了一个问题，我不想在数组中进行更改，当这个数组有8个以上的ArrayList时，在输入时会有很多延迟，我在下面编写这段代码来简单地重现我的代码中发生的情况

App.js

import './App.css';
import React,{useState} from 'react';
import Inputs from './Inputs'

function App() {

  const [ array, setArray ] = useState([
    ["John",'30','ttt'],
    ["Smith",'20','ttt'],
    ["Thiago",'40','ttt'],
    ["Jake",'30','ttt'],
    ["Fer",'41','ttt'],
    ["Fred",'23','ttt'],
    ["Otto",'55','ttt'],
    ["Gago",'21','ttt'],
    ["Higor",'15','ttt'],
  ]);

  return (
    <div className="App">
      <header className="App-header">
        <Inputs array={array} setArray={setArray} />
        <br />
        <button onClick={() => {
          
          /** add More arrays */
          setArray(array=> [...array, ['','','']])

        }}>add more</button>
        <br />
        <button onClick={() => console.log("Send array to DB")}>Send array to DB</button>
      </header>
    </div>
  );
}

export default App;

import'/App.css'；
从“React”导入React，{useState}；
从“./Inputs”导入输入
函数App（）{
const[array，setArray]=useState([
[“约翰”、“30”、“ttt”]，
[“史密斯”、“20”、“ttt”]，
[“Thiago”、“40”、“ttt”]，
[“杰克”，“30”，“ttt”]，
[“Fer”、“41”、“ttt”]，
[“Fred”、“23”、“ttt”]，
[“奥托”、“55”、“ttt”]，
[“Gago”、“21”、“ttt”]，
[“Higor”、“15”、“ttt”]，
]);
返回(


{
/**添加更多数组*/
setArray（数组=>[…数组，[''，''，'']]
}}>添加更多


console.log（“将数组发送到DB”）}>将数组发送到DB
);
}
导出默认应用程序；

Inputs.js

import './App.css';
import React,{ useEffect } from 'react';

function Inputs(props) {

const { array, setArray } = props

const handleInputChange = (e, index, position2) => {
    const {value} = e.target;
    const list = [...array];
    list[index][position2] = value;
    setArray(list);   
};

useEffect(() => {
    console.log(array)
},[array])

  return (
    array.map((item, index) => {
        return (<div key={index}>
            
            <input 
                value={item[0]}
                onChange={(e) => {
                    handleInputChange(e,index,0)
                }}
            />
            <input 
                value={item[1]}
                onChange={(e) => {
                    handleInputChange(e,index,1)
                }}
            />
            <input 
                value={item[2]}
                onChange={(e) => {
                    handleInputChange(e,index,2)
                }}
            />
        </div>)
    })
  );
}

export default Inputs;

import'/App.css'；
从“React”导入React，{useffect}；
功能输入（道具）{
const{array，setArray}=props
常量handleInputChange=（e，索引，位置2）=>{
const{value}=e.target；
常量列表=[…数组]；
列表[索引][位置2]=值；
setArray（列表）；
};
useffect（（）=>{
console.log（数组）
}，[array]）
返回(
array.map（（项目，索引）=>{
返回(
{
handleInputChange（e，索引，0）
}}
/>
{
handleInputChange（e，索引，1）
}}
/>
{
handleInputChange（e，索引，2）
}}
/>
)
})
);
}
输出默认输入；

我找不到其他选项来更改此数组中的值，并且输入中的每个类型都会再次创建每个数组

---

谢谢

可以考虑为所有输入保持单独的状态，而不是创建一个共同的状态。

---

更好的替代方法是创建一个纯组件，可用于呈现所有输入，然后只需传递值和onChange回调。

这解决了我的问题，只为输入创建另一个JS文件，然后每个输入都具有唯一的useState。很有效，谢谢。太好了！！快乐编码！