通过反应中的项目列表进行映射并分别编辑每个项目

问题描述

我正在处理从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> }
                                            }

我该如何编辑该部分以实现我真正想要的！？预先感谢。

解决方法

像这样int 0x13，将isEditActive更改为等于数组中当前迭代的索引，如果您检查setEditActive(index)，则应该仅使当前形式可见。