React App - 删除动态创建的 TextInput 总是删除数组中的最后一个答案

【问题标题】：React App - removing dynamically-created TextInput always removes the last in the arrayReact App - 删除动态创建的 TextInput 总是删除数组中的最后一个
【发布时间】：2020-05-13 10:46:16
【问题描述】：

我正在成功地动态创建受控的 TextInputs。对于创建的每个 TextInput，还会创建一个“删除”按钮，该按钮在触发时应从数组中删除该特定的 TextInput。但是，它总是删除数组中的最后一个 TextInput。这是父组件中定义的删除函数：

   removeCertClick = (i) => {
    let certifications = [...this.state.certifications];
    certifications.splice(i, 1);
    this.setState({ certifications });
   }

我的初始状态：

this.state = {
   certifications: [{ certification: '' }]
}

这是我动态呈现 TextInputs 以及删除按钮的代码：

renderCertificationFields = () => {
    const { certifications } = this.props.values;
    const { handleCertificationChange } = this.props; //receiving as props from parent component

    return certifications.map((item, index) => (
        <Grid container spacing={1} key={index}>    
            <Grid item md={10}>
                <TextField
                    label='Certification name'
                    name='certification'
                    onChange={(index, event) => handleCertificationChange(index, event)}
                    defaultValue={item.certification || ''}
                />
            </Grid>
            <Grid item md={2}>
                <Button
                    onClick={() => removeCertClick(index)}
                >Remove</Button>
            </Grid>
        </Grid>
    ))
}

感谢您的帮助。

【问题讨论】：

标签： javascript arrays reactjs

【解决方案1】：

根据您的代码，没有问题，应该可以正常工作，

我认为由于相同的名称或种类，您会误解它总是最后删除：

您可以通过运行代码 sn-p 在下面的 sn-p 中看到：

const { useState , useEffect } = React;

class App extends React.Component {
  
  state = {
    certification : ["Cert 1","Cert 2","Cert 3","Cert 4","Cert 5","Cert 6","Cert 7","Cert 8"]
  }
  
  removeCertClick = (i) => {
    let certification = [...this.state.certification];
    certification.splice(i,1)
    this.setState({certification})
  }


  render() {
    return (
      <div>
        With Name :
        <br/><br/>
        {
          this.state.certification.map((crt,i) => <button onClick={() => this.removeCertClick(i)}>{crt} - X</button>)
        }
        <br/><br/>
        Button Name With Index : (Looks like you are removeing last always) :
        <br/><br/>
        {
          this.state.certification.map((crt,i) => <button onClick={() => this.removeCertClick(i)}>Remove {i}</button>)
        }
      </div>
    );
  }
  
}

ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

【讨论】：

【解决方案2】：

您的 removeCertClick 函数应该如您所愿。尝试在那里记录 i var 并检查元素索引。

 removeCertClick = (i) => {
    console.log('remove', i);
    let certifications = [...this.state.certifications];
    certifications.splice(i, 1);
    this.setState({ certifications });
   }

如果您看到预期的索引 - 问题不在这里。

【讨论】：

【解决方案3】：

这就是你需要做的，使用过滤器来避免复制数组并过滤所有不包含给定索引的元素，这样你就可以删除想要的元素

 removeCertClick = (i) => {
   const certifications = this.state.certifications.filter((x, j) => i !== j);
   this.setState({
     certifications
   });
 }

【讨论】：

【解决方案4】：

remove 功能确实是正确的。问题是由于我忘记为 TextField 添加“值”属性，如下所示：

<TextField
                label='Certification name'
                name='certification'
                onChange={event => handleCertificationChange(index, event)}
                value={item.certification} // prop that was missing
            />

感谢你们所有的回答，因为它帮助我解决了这个问题。

【讨论】：