如何使用 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

  min={0}

  value={skid[key]}

  rules={[

    {

      required: true,

      message: "Please input quantity!"

    }

  ]}

  onChange={(newQuantity) => {

    updateProductQuantity(skid, key, newQuantity, index);

  }}

/>