在ReactJS中尝试从我的数组中拼接项目

如何解决在ReactJS中尝试从我的数组中拼接项目

我正在尝试在DoubleClick事件中拼接列表（库存）中的某个项目，但某些功能无法正常运行。如果有人可以这么友好地帮助我找出我在这里做错了的地方，那将是很好的。对于信息：当我尝试切片一个项目时，它会被切片，但每次第一个项目和第二个项目都会丢失里面的所有内容：

    function Inventory() {
    const [datas,setData] = useState([
      {
        id: 1,label: "Sword",itemname: "grey_sword",pieces: 1,type: "weapon",},{
        id: 2,label: "Knife",itemname: "grey_knife",]);

    useEffect(() => {
      const getItems = (data) => {
        setData(data);
      } // this section is for something else
    },[datas]);

    const deleteItem = (index) => {
      const test = ([],datas)
      test.splice(index,1)
      setData([{test : datas}]);
    }



    const renderItem= (data,index) => {
      return (
        <Item
          key={data.id}
          id={data.id}
          type={data.type}
          label={data.label}
          index={index}
          name={data.itemname}
          pieces={data.pieces}
          deleteItem={deleteItem}
        />
      )
    }

    return (
        <div className="inventory-holder">
            <div className="inventory-main">
              <div className="inventory-information">
                <div className="inventory-title">
                  Inventory
                </div>
                <div className="inventory-weight-info">
                  0.20 kg / 1.00 kg
                </div>
                <div className="inventory-buttons">
                  <button className="refresh-button" tabIndex="-1"><FontAwesomeIcon icon={faredo} /></button>
                  <button className="close-button" tabIndex="-1"><FontAwesomeIcon icon={faTimes} /></button>
                </div>
              </div>
              <div className="items-holder">
                <div>{datas.map((data,i) => renderItem(data,i))}</div>
              </div>
          </div>
        </div>
    )
}

export default Inventory;

那将是物品：

const Item = ({ index,id,type,label,name,pieces,deleteItem }) => {
  
    const useItem = e => {
      const type = e.target.getAttribute("itemType");
      const index = e.target.getAttribute("data-index");
      const pieces = e.target.getAttribute("itempieces");
      console.log(type + " " + index + " " + pieces )
      if(parseInt(pieces) <= 1){
        deleteItem(parseInt(index));
      }
    }

    return(
        <div data-index={id} ondoubleclick={useItem} className="inventory-item" itemType={type} itemname={name} itemlabel={label} itempieces={pieces}>
            <img className="item-pic" src={chosedtype} ></img>
            <div className="item-label">{label}</div>
            <div className="item-number-pieces">{pieces}</div>
        </div>
    );
};

export default Item;

解决方法

问题

Array::splice进行就地突变。

splice()方法通过删除或更改数组的内容 替换现有元素和/或添加新元素 。

这里的主要问题是状态突变。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

const test = ([],datas)最终将状态引用data保存到test，然后由test.splice(index,1)突变，然后奇怪的是，以不同的方式{{1 }}。

解决方案

常见的模式是改用array::filter并根据索引进行过滤。 setData([{ test: datas }]);返回一个新数组。

filter

,

您的商品太复杂了：

您可以直接使用道具，而无需将其通过div。

const Item = ({ index,id,type,label,name,pieces,deleteItem }) => {
  
    const useItem = () => {
      console.log(type + " " + index + " " + pieces )
      if(pieces <= 1){
        deleteItem(index);
      }
    }

    return(
        <div data-index={id} onDoubleClick={useItem} className="inventory-item">
            <img className="item-pic" src={chosedtype} ></img>
            <div className="item-label">{label}</div>
            <div className="item-number-pieces">{pieces}</div>
        </div>
    );
};

export default Item;

然后您的deleteItem函数无法执行您想要的操作：

const deleteItem = (index) => {
  const test = ([],datas); //test = datas;
  test.splice(index,1); // test = test without the item at the index
  setData([{test : datas}]);//data = [{test: datas}] so an array with an object with the property test = datas (the original array).
}

您应该将deleteItem更改为以下内容：

const deleteItem = (index) => {
    const newArray = datas.filter((item,i) => i !== index);
    setData(newArray);
}