将数组映射到 UI 不是正确显示元素

Question

问题的一些背景：我有一个动态输入字段表单，用户可以通过从下拉菜单中选择一个选项来选择他们所属的社交媒体平台。还有一个相应的文本输入，用户可以在其中输入他们在该社交媒体平台上的用户名。用户可以添加输入字段或删除输入字段，也可以遵循相同的格式。表单在以下屏幕截图中的 UI 上如下所示：

social_media_form_before_deleted_input_field

下面是相关的 JSX 代码：

{socialMediaInputs.map((input, index) =>
                <>
                    <tr className="socialMediaOptionsRow">
                        <td>
                            {index === 0 ? null :
                                <button onClick={event => handleDelete(event, input.id)}>Delete</button>
                            }
                        </td>
                        <td >
                            <select
                                id="socialMediaOptions"
                                onChange={event => handleSocialMediaOptions(event, setIsTextInputDisabled)}
                                required
                                name={input.id}
                            >
                                <option>choose</option>
                                <option name="socialMedia" value={"Twitter"}>Twitter</option>
                                <option name="socialMedia" value={"Facebook"}>Facebook</option>
                                <option name="socialMedia" value={"LinkedIn"}>LinkedIn</option>
                                <option name="socialMedia" value={"Instagram"}>Instagram</option>
                                <option name="socialMedia" value={"Medium"}>Medium</option>
                                <option name="socialMedia" value={"Other"}>Other</option>
                            </select>
                        </td>
                        <td>
                            <input
                                type="text"
                                onChange={handleAccountNameInput}
                                name={input.id}
                                disabled={isTextInputDisabled}
                                required
                            />
                        </td>
                    </tr>
                    <tr>
                       <button 
                          onClick={handleAddBtnClick} 
                          disabled={socialMediaInputs.length >= 5}
                       >
                         <CgMathPlus/>       
                         Add
                       </button>
                    </tr>
                </>

问题是每当我通过按删除按钮删除输入字段时，输入字段确实会从socialMediaInputs 中删除——一个状态值，其中存储了输入字段的所有值并映射到UI，如屏幕截图和代码所示——但它仍然出现在 UI 上。因此，根据上面的屏幕截图，如果我按下具有LinkedIn 的选择选项输入字段的删除按钮，则在 UI 上被删除的不是那个输入字段，而是最后一个输入字段——在这种情况下，选择了Instagram 的选项输入字段。这是该结果的屏幕截图：

social_media_form_after_deleted_input_field

正如您在第二个屏幕截图中看到的那样，包含company: LinkedIn 的对象确实会从socialMediaInputs 中删除，但它仍会出现在 UI 上。当用户单击相应的“删除”按钮时，如何从 UI 中删除输入字段？

这是处理按下删除按钮的 javacript 代码：

const handleDelete = (event, id_) => {
        event.preventDefault();
        const inputs_ = socialMediaInputs.filter(input => input.id !== id_);
        setSocialMediaInputs(inputs_);
    }

编辑：

当我向每个 tr 添加一个键时，当按下删除按钮时，特定的 tr 确实会被删除，但被删除行下方的任何行都会在 UI 上重置。因此，如果我删除选中了Facebook 的行，在下面的第一个屏幕截图中，它确实会被删除。但是它下面的行会被重置——这是我不想要的——在下面的第二个屏幕截图中可以看到。

form_with_key_before_deletion

form_with_key_after_deletion

Answer 1

问题是你忘记了key 属性映射一个数组并在 UI 中渲染它。如果没有key，shadow dom 将无法理解数组中的项目已更改。