如何实现删除按钮，该按钮通过单击它来删除每个特定行？

Question

它是一个程序，只需单击“添加记录”，它只是在每个行上获取特定数据。我很难执行删除按钮功能，在单击它时，该特定行将被删除。它应在deletehandler（）中实现。

import React, { useState } from 'react'


const DataFetch = () => {

    const [posts, setPosts] = useState([]);

    const ClickHandler = () => {
        const url = `https://swapi.dev/api/people/${Math.floor(Math.random() * 10) + 1}`
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                const json = await response.json();
                console.log(json);
                setPosts([...posts,
                   json.name])
            }
            catch (error) {
                console.log("error");
            }
        };
        fetchData();
    }

    const DeleteHandler = (e) => {
            const name = e.target.getAttribute("name")
            console.log(name)
    }

    return (
        <div>
            <div>
                <button onClick={ClickHandler}>ADD RECORD</button>
            </div>
            <table>
                {posts.map((post) =>
                    <tr>
                        <td key={Math.random()}>{post}</td>
                        <td><button name={post} onClick={()=>DeleteHandler}>delete</button></td>
                    </tr>
                )}
            </table>
        </div>
    );
};

export default DataFetch

Answer 1

使用此代码

import React, { useState } from "react";

let uidArray = [];

const DataFetch = () => {
  const [posts, setPosts] = useState([]);

  const ClickHandler = () => {
    const url = `https://swapi.dev/api/people/${
      Math.floor(Math.random() * 10) + 1
    }`;
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        console.log(json);
        setPosts([...posts, json.name]);
      } catch (error) {
        console.log("error");
      }
    };
    fetchData();
  };

  const DeleteHandler = (e) => {
    const ele = document.getElementsByClassName(e)[0];
    ele.remove();
  };

  return (
    <div>
      <div>
        <button onClick={ClickHandler}>ADD RECORD</button>
      </div>
      <table>
        {posts.map((post) => (
          <tr className={post}>
            <td key={Math.random()}>{post}</td>
            <td>
              <button name={post} onClick={() => DeleteHandler(post)}>
                delete
              </button>
            </td>
          </tr>
        ))}
      </table>
    </div>
  );
};

export default DataFetch;

https://codesandbox.io/s/smoosh-breeze-breeze-breeze-breeze-rreeze-breeze-rreeze-rreeze-rreeze-rreeze-rreeze-reas-rreeze-rreeze-rx7s0b

Answer 2

在您的deletehandler（）函数中，您应该只能调用setPosts（）并将帖子设置为自身减去单击的行，然后您的JSX知道可以自行渲染，并且该行不再存在。