Javascript 从行中删除下拉列表和文本字段将删除ReactJS中状态更改时不正确的字段

我有一行，其中包括一个React Select下拉列表和一个输入字段。我试图通过索引删除特定行。我正在处理函数中传递索引，并希望从行中删除这两个字段。输入字段已正确删除，但下拉列表值未从同一行中删除，它将从最后一个索引中删除下拉列表

我在这个处理程序中的索引帮助下删除该行

按索引删除行：

handleRemoveSocial(idx) {
    let someArray = this.state.SocialData;
    someArray.splice(idx, 1);
    this.setState({ SocialData: someArray });
  }

我在map方法的帮助下渲染Select下拉列表和文本框，映射到我所在状态下的数组。现在，当我移除文本框时，如何映射同一行中的Select下拉列表值。我在这篇文章中加入了沙盒链接

{this.state.SocialData.map((Social, idx) => (
            <div className="form-group" key={idx}>
              <label htmlFor={"socialprofile"} className="control-label">
                Social profile
              </label>
              <div className="form-input-container select-social-link">
                <Select
                  data-id={idx}
                  className="profile-module-select-container"
                  classNamePrefix="profile-module-select"
                  options={options}
                  onChange={(selected) => {
                    this.handleSocialNameChange(selected.value, idx);
                  }}
                  onMenuOpen={() => {
                    this.setState({
                      selectMenuOpen: true
                    });
                  }}
                  onMenuClose={() => {
                    this.setState({
                      selectMenuOpen: false
                    });
                  }}
                  components={{
                    IndicatorSeparator: () => null
                  }}
                  placeholder={"Select"}
                  isSearchable={false}
                  isClearable={false}
                />
              </div>
              <div className="form-input-container input-social-link">
                <input
                  type="text"
                  id={`${SocialData[idx].socialname}-${idx}`}
                  className="social-form-control"
                  placeholder={`Social Url - ${Social.socialname}`}
                  value={SocialData[idx].name}
                  onChange={(e) =>
                    this.handleInputVlaueChange(e.target.value, idx)
                  }
                />

{this.state.SocialData.map（（Social，idx）=>(
社会概况
{
此.handleSocialNameChange（selected.value，idx）；
}}
onMenuOpen={（）=>{
这是我的国家({
选择菜单打开：true
});
}}
onMenuClose={（）=>{
这是我的国家({
选择菜单打开：false
});
}}
组成部分={{
指示符分隔符：（）=>null
}}
占位符={“选择”}
isSearchable={false}
isClearable={false}
/>
this.handleInputVlaueChange（e.target.value，idx）
}
/>

---

不能将

索引

值设置为

键

。这将在添加和删除元素时引起问题。

---

另外，不要使用array.splice使用array.filter。

splice

将改变原始状态数组。

这就是在这里触发

change

事件时

handleSocialNameChange（）

处理程序中出现问题的地方

onChange={(selected) => {
   this.handleSocialNameChange(selected.value, idx);
}}

使用索引作为ID总的来说不是一个好主意，因为它们以后会把事情搞砸，我们还必须在代码中添加额外的逻辑

我们可以有效地使用

uuid（）

库或技巧

newdate（）.getTime（）.toString（）

代码沙盒链接的工作代码：

---

享受：）

我确实使用了过滤方法，使用了id而不是索引。但它仍然不起作用。。。