移除输入组件时反应错误

Question

我不确定这是否是个问题，但我在这个问题上苦苦挣扎。我试图创建一个简单的示例来发布我的项目：

https://codepen.io/as3script/pen/VMbNdz?editors=1111

该示例上有四个按钮。

要重现该问题，请按前三个按钮中的每个按钮以从中创建文本输入并输入一个值。例如，在第一个输入100，在第二个输入200，第三个输入300。现在按第四个按钮删除第一个输入。

它应该将第二和第三保持其各自的值200和300，但相反，它在第二和第二显示100。

此代码与CodePen上的代码相同，只是不允许在没有此链接的情况下发布链接。

class ButtonComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {filtersArr:[]}
    this.addButtons = this.addButtons.bind(this);
    this.removeButtons = this.removeButtons.bind(this);
    this.getInput = this.getInput.bind(this);
    this.onChangeHandler = this.onChangeHandler.bind(this);
  }

   addButtons(e){     
    let tempArr = this.state.filtersArr;

    tempArr.push({comp:this.getInput(e.target.id), id:e.target.id});

    this.setState({filtersArr:tempArr});
  }

  removeButtons(e){
    console.log(e.target.id);
    let newArr = this.state.filtersArr.filter((filter)=>{
      return (filter.id !=='FirstButton')
    })
    this.setState({filtersArr:newArr});
  }

  onChangeHandler(e){
    console.log(e.target.value);
  }

  getInput(id){
    return (
      <div>
        <h6>{id}</h6>
        <input
          id="min"
          type="text"
          placeholder="min"
          onChange={this.onChangeHandler}/>
      </div>
    )
  }

  render() {
    let styles = {
      display:'inline-block'
    }

    return (
      <div>
        <p>Add three buttons and enter the number in each input, and remove amt.</p>
        <button id="FirstButton" onClick={this.addButtons}>FirstButton</button>
        <button id="SecondButton" onClick={this.addButtons}>SecondButton</button>
        <button id="ThirdButton" onClick={this.addButtons}>ThirdButton</button>

        <button id="FirstButton" onClick={this.removeButtons}>Remove firstButton</button>

          <ul>
            {this.state.filtersArr.map((filter, index)=>{
              return <li style={styles} key={index}>{filter.comp}</li>
            })
            }
          </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <ButtonComponent/>,
  document.getElementById('root')
);

Answer 1

问题是您将数组索引用作key，因此React将重用前两个li元素，并删除最后一个元素。更改key={index}为key={filter.id}，它会按预期工作。

关于注释和下注的更新：假定该字段为，我在实际代码中假定过滤器具有唯一性id。CodePen似乎更像是精简版来显示问题。但是，如果您确实希望让每个按钮创建多个文本字段，则确实需要添加一些额外的东西来区分键（例如计数器）。但是，这不会影响问题中所述的问题。

再次查看代码，我发现getInput将其提取到单独的（无状态）组件中是理想的选择，例如FilterInput。与将子渲染保持在组件状态相比，这更适合于react模型。