React Js：重新渲染太多。 React 限制渲染次数以防止无限循环

Question

我试图创建一个具有 -

的功能

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.

Answer 1

您正在立即调用回调。它们需要在这样的地方定义，以便稍后在更改/单击时调用。传递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>