滑块未正确移除

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 的滑块被删除了。不过，乔丹实际上已从用户列表中删除。

任何帮助，将不胜感激。

Answer 1

当用户被移除时，由于状态更改，React 重新呈现页面，并且在mapReact 内部将绘制 5 个滑块，它将与前 5 个滑块相关联，因为您没有向它们添加键。因此，第一步是向地图中的滑块添加关键点，然后重新渲染应该保留并重新使用正确的旧对象，而不是重新绘制或错位它们。此外，您可能希望将滑块的值存储在状态中，使它们成为“受控组件”（设置它们value的起始状态，并处理它们的change事件以更新状态），这样它们就不会在渲染之间丢失它们的信息。