Javascript 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;

---

您正在立即调用回调。它们需要在这种方式中定义，以便在以后更改/单击时调用。传递

onChange

事件对象，以便可以访问该值。对于按钮，您可以简单地附加处理程序，因为事件是无关的

 <input
   id="txtKey"
   type="text"
   onChange={e => setKey(e.target.value)} // callback accepts event object
 />
 ...
 <input
   id="txtValue"
   type="text"
   onChange={e => setValue(e.target.value)} // callback accepts event object
 />
 ...
 <input
   type="button"
   onClick={addItem} // direct attach addItem callback
 >
   Add
 </input>

setKey（e.target.value）}//回调接受事件对象
/>
...
setValue（e.target.value）}//回调接受事件对象
/>
...
添加

您正在立即调用回调。它们需要在这种方式中定义，以便在以后更改/单击时调用。传递

onChange

事件对象，以便可以访问该值。对于按钮，您可以简单地附加处理程序，因为事件是无关的

 <input
   id="txtKey"
   type="text"
   onChange={e => setKey(e.target.value)} // callback accepts event object
 />
 ...
 <input
   id="txtValue"
   type="text"
   onChange={e => setValue(e.target.value)} // callback accepts event object
 />
 ...
 <input
   type="button"
   onClick={addItem} // direct attach addItem callback
 >
   Add
 </input>

setKey（e.target.value）}//回调接受事件对象
/>
...
setValue（e.target.value）}//回调接受事件对象
/>
...
添加

我搞错了。谢谢：）@CSharper很好，如果您的问题通过答案解决，请接受答案。干杯，我搞错了。谢谢：）@CSharper很好，如果您的问题通过答案解决，请接受答案。干杯