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

Question

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

我怎样才能编辑那个部分来实现我真正想要的！？提前致谢。

Answer 1

将 isEditActive 更改为等于数组中当前迭代的索引，如下所示 setEditActive(index) 并且对于您的 if 检查，请执行此操作 if (isEditActive === index) { 这应该只生成当前表单可见。