React：更新数组时观察到滞后

Question

我在输入方面遇到问题而不是想更改数组，当此数组有超过 8 个数组列表时输入输入时有很多 lag/delay，我将下面的代码简化重现我的代码所发生的事情。

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;

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;

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

谢谢

Answer 1

您可以考虑为所有输入维护单独的状态，而不是创建一个公共状态。

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

React：更新数组时观察到滞后

React: Lag observed when array is updated

javascript

input

onchange

reactjs

react-hooks