Javascript 删除特定的数组元素，而不仅仅是最后一个带有.pop-Redux表单的数组元素

我已经创建了上面的代码沙盒。我使用的是redux表单（[），您可以在其中添加和删除字段，以使用

.push

和

.pop

填充表单

使用.pop的问题是，它只会删除最后一个数组元素，我希望每个.push创建的元素都有自己的“删除”按钮，因此不只是从数组中删除最后一个元素

我假设我需要分配

.pop

来查看匹配的react

.map

元素

const renderForm = ({ fields, label }) => (
  <div>
    <div
      variant="fab"
      color="primary"
      className="jr-fab-btn"
      aria-label="add"
      onClick={() => fields.push()}
    >
      ADD
    </div>
    <div
      variant="fab"
      color="primary"
      className="jr-fab-btn"
      aria-label="add"
      onClick={() => fields.pop()}
    >
      REMOVE
    </div>
    {fields.map((newIntel, index) => {
      console.log("newIntel", newIntel, index);
      return (
        <Field
          name={newIntel}
          key={index}
          label={label}
          placeholder={label}
          component={renderTextField}
          placeholder={label}
          label={label}
        />
      );
    })}
  </div>
);

const renderForm=（{fields，label}）=>(
fields.push（）}
>
添加
fields.pop（）}
>
去除
{fields.map（（newIntel，index）=>{
log（“newIntel”，newIntel，index）；
返回(
);
})}
);

---

欢迎提出任何想法。

如果您要查看渲染表单的支柱

字段，它包含一个方法
remove
，用于删除特定元素。只需将索引传递给它即可。
下面是您的组件的修改代码块。我已将其设置为类组件：

class renderForm extends React.Component {
 render(){
  let {fields, label} = this.props;
  const removeName = (index) => {
    fields = fields.remove(index);
  }
return(
  <div>
    <div
      variant="fab"
      color="primary"
      className="jr-fab-btn"
      aria-label="add"
      onClick={() => fields.push()}
    >
      ADD
</div>

    {fields.map((newIntel, index) => {
      console.log("newIntel", newIntel, index);
      return (
        <div>
          <Field
            name={newIntel}
            key={index}
            label={label}
            placeholder={label}
            component={renderTextField}
          />
          <p
            variant="fab"
            color="primary"
            style={{'cursor': 'pointer'}}
            className="jr-fab-btn"
            aria-label="add"
            onClick={() => removeName(index)}
          >
            REMOVE
      </p>
        </div>
      );
    })}
  </div>
 )
}}

类renderForm扩展React.Component{
render（）{
设{fields，label}=this.props；
常量removeName=（索引）=>{
字段=字段。删除（索引）；
}
返回(
fields.push（）}
>
添加
{fields.map（（newIntel，index）=>{
log（“newIntel”，newIntel，index）；
返回(
removeName（索引）}
>
去除

);
})}
)
}}

希望您能轻松理解代码块。只需将上面的代码粘贴到renderForm组件的位置即可。它将像魔术一样工作。：p
可能重复Yes Thanke，这有助于将其转换为每个元素上的按钮格式。您确实不应该从接收它们的组件内部修改
道具（例如，更改
字段
在
渲染表单
中包含的内容）。有关更多详细信息，请参阅。是的，这太棒了。我正在着手实现此功能。谢谢