React Js:重新渲染过多。React限制渲染的数量以防止无限循环

2个文本框-1个用于键,1个用于值

在列表中显示数组

为此,我在React Js中创建了组件-

import React, { useState } from 'react';

function  HookArray() {
    const[lKey,setKey]=useState('');
    const[lValue,setValue]=useState('');
    const[lKeyValue,setArray]=useState({id:'',value:''});

    const addItem=()=>{
            setArray(...lKeyValue,{lKey,lValue})
    }

    return(
        <div>
            <div id="divArrayList">
                
                <ul>
                    {
                        
                        lKeyValue.map(x=>
                            (
                             <li key={x.id} value={x.value}></li>   
                            ))
                    }
                </ul>
            </div>
            <input id="txtKey" type="text"  onChange={setKey(x=>x.target.value)} ></input>
            <br></br>
            <input id="txtValue" type="text"  onChange={setValue(x=>x.target.value)}></input>
            <br></br>
            <input type="button" onClick="addItem();">Add</input>
        </div>
    )
}
export default HookArray;

但这是在运行时抛出错误-

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.