如何删除reactjs中添加的部分

Question

这是发生的事情，尝试

add 3 sections

，然后

delete

，

section content 2

，应该删除该部分，但事实并非如此。我想我错过了代码或

handleDelete

中的某些内容。

下面是我的代码，也是在线代码。

import { useState } from "react";
import styled from "styled-components";

const AddSection = styled.div`
  padding: 1rem;
  border: 1px solid blue;
  margin: 1rem 0;
  position: relative;
`;

const CloseBtn = styled.div`
  position: absolute;
  right: -0.5rem;
  top: -0.5rem;
  background-color: orange;
  font-size: 1rem;
  padding: 0.1rem 0.7rem;
  border-radius: 0.5rem;
  cursor: pointer;
`;

export default function App() {
  const [val, setVal] = useState([]);
  const handleAdd = () => {
    const addValue = [...val, []];
    setVal(addValue);
  };
  const handleDelete = (index) => {
    const deleteValue = [...val];
    deleteValue.splice(index, 1);
    setVal(deleteValue);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="m-container">
        {val.map((element, index) => {
          return (
            <AddSection key={index} draggable="true">
              <div>Section Content {index + 1}</div>
              <CloseBtn onClick={() => handleDelete(index)}>x</CloseBtn>
            </AddSection>
          );
        })}
        <button onClick={() => handleAdd()}>Add Section</button>
      </div>
    </div>
  );
}

Answer 1

const handleDelete = (index) => {
  setVal(prevState => {
    const deleteValue = [...prevState];
    deleteValue.splice(index, 1);
    return deleteValue;
  });
};

我修改了您的代码以确保不变性，通过使用 setVal 的函数形式，可以保证您使用最新的状态，它还有助于避免状态更新的异步性质中静态状态数据的潜在问题