如何使用 onClick 方法删除对象并更新数组

Question

我正在从 skidList 数组创建列表并处理每个 skid 上的复制和删除操作以及单击删除按钮我调用的deleteSkid方法删除该索引处的 skid 并更新列表。

但是，它不是删除特定索引处的 skid，而是删除数组列表中的最后一个 skid。

const CreateNewTab = () => {

  const [skidList, setSkidList] = useState([]);

  const [productNameMap, setproductNameMap] = useState({});

  useEffect(() => {

    let skidList = [];

    let newSkid = {};

    newSkid["2"] = "0";

    newSkid["3"] = "0";

    newSkid["4"] = "0";

    skidList.push(newSkid);

    setSkidList([...skidList]);

    let productNameMap = {};

    productNameMap["2"] = "PEN";

    productNameMap["3"] = "PENCIL";

    productNameMap["4"] = "ERASER";

    setproductNameMap({ ...productNameMap });

  }, []);

  const updateProductQuantity = (skid, key, newQuantity, index) => {

    console.log("Inside update Skid Quantity Index= " + index);

    skid[key] = newQuantity;

    let newSkidList = skidList;

    newSkidList.splice(index, 1, skid);

    console.log(newSkidList);

    setSkidList([...newSkidList]);

  };

  const deleteSkid = (index) => {

    console.log(index);

    let newSkidList = skidList;

    newSkidList.splice(index, 1);

    console.log("Skid deleted from: " + newSkidList);

    setSkidList([...newSkidList]);

  };

  const insertSkid = (skid) => {

    setSkidList(skidList.concat([{ ...skid }]));

  };

  return (

    <div>

      {skidList.flatMap((skid, index) => (

        <div style={{ marginRight: "0", paddingRight: "0" }}>

          <Row style={{ margin: "0", padding: "0" }}>

            <Col span={19}>

              {Object.keys(skid).map((key) => (

                <Row>

                  <Col span={16}>

                    <h6>{productNameMap[key.toString()]}</h6>

                  </Col>

                  <Col span={8}>

                    <InputNumber

                      min={0}

                      defaultValue={skid[key]}

Answer 1

似乎它与 react 如何回收 dom 或其他东西有关，该项目确实从数组中删除但不知何故该值保留在 dom 中，因为您在输入中使用而不是，进行这个小改动defaultValue它value会工作value={skid[key]}

Answer 2

您的实现deleteSkid()很好，但是您将值传递给 asInputNumber所以defaultValue当组件重新渲染时它不会改变。只需将其替换为value，它就可以工作。<InputNumber&nbsp; min={0}&nbsp; value={skid[key]}&nbsp; rules={[&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; required: true,&nbsp; &nbsp; &nbsp; message: "Please input quantity!"&nbsp; &nbsp; }&nbsp; ]}&nbsp; onChange={(newQuantity) => {&nbsp; &nbsp; updateProductQuantity(skid, key, newQuantity, index);&nbsp; }}/>