Reactjs 映射react中的项目列表，并分别编辑每个项目

我正在处理从API获得的项目列表。它被正确地渲染了。但是，我在您单击的列表的每个项目中呈现了一个按钮，然后，该项目变成一种输入形式，其数量与项目中的元素数量相同，以便使其可编辑。我尝试了以下代码，但单击按钮后，它会将所有项目转换为输入形式，而不是仅转换我单击的项目：

{orderWithID.data.order_items.map((item, index, array) => {
                                            if (!isEditActive) {
                                                {
                                                    return <tr>
                                                        <td>#{item.index}</td>
                                                        <td>{item.name}</td>
                                                        <td>{item.quantity}</td>
                                                        <td>{item.price}</td>
                                                        <td>
                                                            <div className="delete-items-wrapper">
                                                                <div>-</div>
                                                                <div className="edit-delete-items">
                                                                    <img className="edit-img" src={edit} 
                                                                        onClick={() => {
                                                                        setEditActive(!isEditActive);

                                                                    }
                                                                    }
                                                                    />
                                                                    {index > 0 ? <div className="recycle- 
                                                                    bin"><img src={recycle_bin} onClick= 
                                                                    {() => {
                                                                        
                                                                     postRemoveItem(orderWithID.data._id, 
                                                                     item._id);
                                                                        
                                                                   loadOrderWithID(orderWithID.data._id);
                                                                    }} /></div> : null}
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                }
                                            }
                                            else {
                                                { return <div>
                                              <Form>
                                                  <input type="text" name="name"/>
                                                  <input type="text" name="price"/>
                                                  <input type="text" name="quantity"/>
                                                  <input type="text" name="instructions"/>                                              
                                              </Form>
                                             </div> }
                                            }

{orderWithID.data.order\u items.map（（项、索引、数组）=>{
如果（！isEditActive）{
{
返回
#{item.index}
{item.name}
{item.quantity}
{item.price}
-
{
setEditActive（！isEditActive）；
}
}
/>
{索引>0{
postRemoveItem（orderWithID.data.\u id，
项目._id）；
loadOrderWithID（orderWithID.data.\u id）；
}}/>：null}
}
}
否则{
{返回
}
}

---

如何编辑该部分以实现我的实际需要！？提前感谢。

更改

isEditActive

使其与数组中当前迭代的索引相等，如下所示

setEditActive（index）

，对于您的if检查，请执行此操作

if（isEditActive==index）{

这应该只使当前表单可见