React JS数组状态只是不断重置，而不是添加新的值

Question

我想创建一个包含所有按下的键的状态。

function App() {
const [inputArray, setInputArray] = useState(["After me should be a list of keys: "]);
function keyDownListener(e){
console.log(`Key: ${e.key} with keycode ${e.keyCode}. Array: ${inputArray} `);
let clonedArray = [...inputArray];
clonedArray.push(e.key);
setInputArray(clonedArray);
}

useEffect(() => {
document.addEventListener('keydown', keyDownListener);
}, []);
return (
<div className='app' >
{inputArray}
</div>
);
}

但由于某种原因，它总是只有一个最后按下的键，虽然我尝试了很多方法来更新状态，结果总是一样的。所以输出总是像这样:me之后应该是一个键列表:Alt它确实对我按下按键有反应，但它总是只显示一个键，而不是像这样添加新的键:在我之后应该是一个键列表:AltAltAltAlt

Answer 1

将函数更新为

function keyDownListener(e) {
console.log(`Key: ${e.key} with keycode ${e.keyCode}. Array: ${inputArray} `);
setInputArray(prevArray => [...prevArray, e.key]);
}

Answer 2

你的useEffect缺少一个依赖项(keyDownListener)，所以它总是引用第一个keyDownListener(它本身引用第一个inputArray)。

你可以这样解决你的问题，例如:

useEffect(() => {
function keyDownListener(e){
console.log(`Key: ${e.key} with keycode ${e.keyCode}. Array: ${inputArray} `);
let clonedArray = [...inputArray];
clonedArray.push(e.key);
setInputArray(clonedArray);
}
document.addEventListener('keydown', keyDownListener);

return () => document.removeEventListener('keydown', keyDownListener);
}, [inputArray]);