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

Question

我正在尝试在 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",

        pieces: 1,

        type: "weapon",

      },

    ]);

    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;

Answer 1

问题Array::splice进行就地突变。该方法通过移除或替换现有元素和/或就地splice()添加新元素来更改数组的内容。这里的主要问题是状态突变。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operatorconst test = ([], datas)最终将状态引用保存data到test，然后由 进行变异test.splice(index, 1)，然后奇怪的是被覆盖回不同的状态setData([{ test: datas }]);。解决方案一种常见的模式是改用array::filter并在索引上进行过滤。filter返回一个新数组。const&nbsp;deleteItem&nbsp;=&nbsp;(index)&nbsp;=>&nbsp;{&nbsp; &nbsp;setData(datas&nbsp;=>&nbsp;datas.filter((_,&nbsp;i)&nbsp;=>&nbsp;i&nbsp;!==&nbsp;index); }

Answer 2

您的项目太复杂了：您可以直接使用道具，而无需通过您的div.const Item = ({ index, id, type, label, name, pieces, deleteItem }) => {&nbsp;&nbsp;&nbsp; &nbsp; const useItem = () => {&nbsp; &nbsp; &nbsp; console.log(type + " " + index + " " + pieces )&nbsp; &nbsp; &nbsp; if(pieces <= 1){&nbsp; &nbsp; &nbsp; &nbsp; deleteItem(index);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <div data-index={id} onDoubleClick={useItem} className="inventory-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img className="item-pic" src={chosedtype} ></img>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="item-label">{label}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="item-number-pieces">{pieces}</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );};export default Item;然后你的deleteItem功能不会做你想要的：const deleteItem = (index) => {&nbsp; const test = ([], datas); //test = datas;&nbsp; test.splice(index, 1); // test = test without the item at the index&nbsp; setData([{test : datas}]);//data = [{test: datas}] so an array with an object with the property test = datas (the original array).}您应该将您的更改deleteItem为：const deleteItem = (index) => {&nbsp; &nbsp; const newArray = datas.filter((item, i) => i !== index);&nbsp; &nbsp; setData(newArray);}