滑块未正确移除

Question

所有代码如下：

import React, { Component } from "react";
import "./App.css";
import Slider from "@material-ui/core/Slider";
import Typography from "@material-ui/core/Typography";

class App extends Component {
  state = {
    users: [],
  };

  componentDidMount() {
    fetch("/users").then((response) =>
      response.json().then((data) => {
        this.setState({ users: data.users });
      })
    );
  }
  removeSlider(user) {
    const users = [...this.state.users];
    users.splice(users.indexOf(user), 1);
    this.setState({ users: users });
  }

  render() {
    return (
      <div className="App">
        {this.state.users.map((user) => (
          <div className="slider" id="di">
            <Typography id="range-slider" gutterBottom>
              <button className="btn" onClick={() => this.removeSlider(user)}>
                {user.first_name[0].toUpperCase() + user.first_name.slice(1)}
              </button>
            </Typography>
            <Slider
              orientation="vertical"
              defaultValue={[0, 50]}
              aria-labelledby="vertical-slider"
            />
          </div>
        ))}
      </div>
    );
  }
}

export default App;

用户来自另一台服务器。在排版中，每个用户都有一个按钮，该按钮基本上将他们从用户列表中删除（由 removeSlider 处理程序处理）。 这里的问题是，当我这样做时，与列表末尾对应的滑块会被删除，而不是我要删除的那个。

所以在图片中我删除了 Jordan，但 Imagine 的滑块被删除了。不过，Jordan 实际上已从用户数组中删除。

任何帮助将不胜感激。

Answer 1

当用户被移除时，由于状态改变，React 重新渲染页面，并且在map 内React 将绘制 5 个滑块，它将与前 5 个滑块相关联，因为您还没有添加 @ 987654321@给他们。

所以第一步是为地图中的滑块添加键，然后重新渲染应该保留并重新使用正确的旧对象，而不是重新绘制或错误对齐它们。

此外，您可能希望将滑块的值存储在状态中，使它们成为“受控组件”（从状态设置它们的 value，并处理它们的 change 事件以更新状态），这样它们就不会在渲染之间丢失他们的信息。