删除状态映射中的特定字段总是删除它的最后一个元素

Question

我在我的功能组件中使用 useState 定义一个状态，如下所示：

 const [appointmentList, setAppointmentList] = useState([]);

该状态代表一个表单列表，我可以像这样添加任意数量的：

const addAppointment = useCallback(() => {
  setAppointmentList([...appointmentList, {id: uuid()}]);
}, [appointmentList]);

但是在删除约会时我遇到了问题。为此，我使用这个 useCallback ：

const removeAppointment = useCallback((i) => {
  let newAppointmentList = [...appointmentList];
  newAppointmentList.splice(i, 1);
  setAppointmentList(newAppointmentList)
}, [appointmentList]);

删除该州中正确的约会效果很好，但它总是删除我的应用程序视图中的最后一个约会。

例如，我有 2 个填写了值的表单。我单击删除第一个表单，在我的状态下，我现在只获得了appointmentList状态中第二个表单的值，但在我看来，最后一个表单已被删除，所以我仍然得到了第一个表单及其值...

我认为问题可能来自这样的事实：我的函数仅删除状态中的正确约会，然后地图意识到约会列表作为减少，然后地图呈现最近的约会而不是选择要删除的约会。

我的表单如下所示：

return(
  <div>
    {appointmentList.map((appointment, index) => (
      <Row key={`${index}`} id={index}>
            <Col>
              <Field
                name={`appointments[${index}].title`}
                id="title"
                component={InputTextField}
                value={appointment.title || ""}
                onChange={e => handleChange(index, e)}
              />
              <Field
                manyOther field
              />
             <Button
                 theme={BUTTON_THEMES.SECONDARY}
                 size={BUTTON_SIZES.SMALL}
                 onClick={() => removeAppointment(index)}
                >
           </Col>
       </Row>
    ))}
    <div>
      <Button
         theme={BUTTON_THEMES.SECONDARY}
         size={BUTTON_SIZES.SMALL}
         onClick={addAppointment}
       >
    </div>
 </div>

那么我怎样才能删除正确的表单呢？

谢谢您的帮助=）

Answer 1

这是一个工作演示。你们的代码相似吗？因为我的正在工作。

Codesandbox

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

export default function App() {
  const [appointmentList, setAppointmentList] = useState([1, 2, 3, 4, 5]);

  const addAppointment = () => {
    setAppointmentList([...appointmentList, { id: uuid() }]);
  };

  const removeAppointment = (i) => {
    let newAppointmentList = [...appointmentList];
    newAppointmentList.splice(i, 1);
    setAppointmentList(newAppointmentList);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {appointmentList.map((item, index) => {
          return <div key={item.id}> {item.id} <button onClick={() => removeAppointment(index)}>delete</button></div>;
        })}
      </div>
      <button onClick={addAppointment} >Add</button>
    </div>
  );
}