在反应中删除地图内数组中的元素

Question

单击跨度时，我想从数组中删除该元素并再次运行地图，以便跨度也被删除。我不知道是语法错误还是什么。这是我编写代码的沙盒的链接。 https://codesandbox.io/s/angry-wu-4dd11?file=/src/App.js

import "./styles.css";

export default function App() {
  const data = [{
      name: "Alex",
    },
    {
      name: "John",
    },
    {
      name: "Leo",
    },
    {
      name: "Murphy",
    },
    {
      name: "Alex",
    },
    {
      name: "John",
    },
    {
      name: "Leo",
    },
    {
      name: "Murphy",
    },
  ];

  return ( <
    div className = "App" > {
      data.map(function(val, id) {
        return ( <
          span key = {
            id
          }
          className = "select__item"
          onClick = {
            (e) => {
              data.splice(data.indexOf(val), id + 1);
              console.log(data);
            }
          } >
          {
            val.name
          } < br / > < br / >
          <
          /span>
        );
      })
    } <
    /div>
  );
}

Answer 1

在这种情况下你应该使用 useState 钩子，因为 React 不会自动重新渲染。你必须在外部告诉 react，一种方法是改变状态，react 会自动重新渲染组件：

现场演示

import { useState } from "react";
import "./styles.css";

export default function App() {
    const [data, setData] = useState([
        {
            name: "Alex",
        },
        {
            name: "John",
        },
        {
            name: "Leo",
        },
        {
            name: "Murphy",
        },
        {
            name: "Alex",
        },
        {
            name: "John",
        },
        {
            name: "Leo",
        },
        {
            name: "Murphy",
        },
    ]);

    const removeItem = (index) => {
        setData(data.filter((o, i) => index !== i));
    };

    return (
        <div className="App">
            {data.map(function (val, id) {
                return (
                    <span
                        key={id}
                        className="select__item"
                        onClick={() => removeItem(id)}>
                        {val.name} <br />
                        <br />
                    </span>
                );
            })}
        </div>
    );
}