javascript - 始终删除屏幕上的最后一个下拉菜单，但删除表格上的正确索引

Question

我的下拉菜单与表中的值一样多，当我从表中删除一个值时，它的状态会正确更新。例如状态是 ["1","2","3","4","5"] 我点击按钮 X 上的值 3 状态将是 ["1","2","4", "5"] 但在屏幕上，最后一个下拉列表将被删除，并显示错误值，如图所示。

 {this.state.knowledge.map((product,index) => (
                <Grid
                  item
                  key={index+1}
                  lg={4}
                  xl={4}
                  sm={12}
                  md={6}
                  xs={12}
                  style={{display: 'inline-flex', alignItems: 'center', margin: '10px 0'}}
                >
                <span style={{color: '#263238',fontFamily: 'Roboto,Helvetica,Arial,sans-serif', fontSize: '18px', fontWeight: '400', lineHeight: '1.334', letterSpacing: '-0.05px', marginRight: '10px'}}>{index+1})</span> 
                <Autocomplete
                id="combo-box-demo"
                options={options}
                getOptionLabel={(option) => option}
                style={{ width: 300 ,marginRight: '2px'}}
                renderInput={(params) => <TextField {...params} label="Select knowledge" variant="outlined" />}
                />
                 <IconButton
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={() => this.handleDeleteKnowledge(index)}
                color="inherit"
                style={{backgroundColor:"transparent"}}
              ><CloseIcon style={{marginRight: '25px', color: '#3f51b5', fontSize:'20px'}} /></IconButton>
            
                </Grid>

  handleDeleteKnowledge = (value) => {
    this.setState({
      knowledge: this.state.knowledge.filter((x,i) => i !== value )
    });
  } 

  constructor(props) {
    super(props);
    this.state = {
      knowledge:["1","2","3","4","5"]
    };
  }

截图示例!!
See example here

Answer 1

问题
这里的问题是您使用数组索引作为 React 键并改变底层数据，即删除一个元素。当您从数组中删除一个元素时，所有以下元素都会向上移动以填充“洞”，而使用的索引 不是 删除。 react 看到的差异是最后一个 React 键不再存在，因此从渲染输出中删除了最后一个元素。
解决方案
如果你打算改变被映射的数组，不要使用数组索引作为 React 键。如果可以，请使用被映射元素的固有属性，例如 id属性(property)。
如果数据没有一些独特的属性来识别它，你应该提供你自己的。我建议使用 uuid为每个数据项提供一个 GUID，但任何保证不重复 id 值的 id 生成器都可以工作。

import { v4 as uuidV4 } from 'uuid';

...

constructor(props) {
  super(props);
  this.state = {
    knowledge: ["1","2","3","4","5"].map(item => ({
      id: uuidV4();
      item,
    }))
  };
}

更新删除处理程序以使用 id 并进行过滤。

handleDeleteKnowledge = (value) => {
  this.setState(prevState => ({
    knowledge: prevState.knowledge.filter((x) => x.id !== value )
  }));
} 

更新 UI 以映射并使用 id属性(property)。

{this.state.knowledge.map((product, index) => (
  <Grid
    item
    key={product.id}
    ...
  >
    ...
    <IconButton
      ...
      onClick={() => this.handleDeleteKnowledge(product.id)} // <-- pass id
      ...
    >
      ...
    </IconButton>
  </Grid>