Javascript 切换数组对象onClick

我正在用React钩子做一个数字益智游戏

这个想法很简单。当您单击第16框旁边时，我想用当前空框索引（第16框）切换已单击的当前框

注意：（我没有添加css或逻辑来隐藏“空”框）

• 我一直在添加函数，这些函数向初始数组中的每个值添加属性：

0:{列：0，行：0，框：1}

• 我还添加了逻辑，用于检查被单击的框是否位于框编号16的旁边（请参见下面的codeSandbox示例中的distanceBetween）

问题

• 我想完全切换16号框（空框）和已单击框的属性（行、列、编号…）

我制作了一个codeSandbox链接来展示它的外观：

GameWrapper.js

import React, { useEffect, useState } from "react";
import { shuffleArray, addBoxProperties, distanceBetween } from "../lib/utils";
import Box from "./Box";
import WrapperDiv from "../elements/WrapperDiv";

const boxesArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

export const shuffledArray = shuffleArray(boxesArray);

const GameWrapper = () => {
  const [boxes, setBoxes] = useState([]);

  useEffect(() => {
    setBoxes(generateBox(shuffledArray));
  }, []);

  const generateBox = (boxArr) => {
    const tempBox = [];

    boxArr.forEach((box, index) => {
      tempBox[index] = {
        ...addBoxProperties(index),
        box,
      };
    });

    return tempBox;
  };

  const boxClick = (box) => {
    const emptyBox = boxes.find((empty) => empty.box === 16);
    const emptyBoxIndex = boxes.indexOf(emptyBox);
    const boxIndex = boxes.findIndex((index) => index.box === box.box);

    const distance = distanceBetween(box, emptyBox);
    if (distance.neighbours) {
      swap(boxIndex, emptyBoxIndex);
    }
  };

  const swap = (clickedBoxIndex, emptyBoxIndex) => {
    let tempArr = [...boxes];
    tempArr[emptyBoxIndex] = boxes[clickedBoxIndex];
    tempArr[clickedBoxIndex] = 0;

    setBoxes(() => [...tempArr]);
  };

  console.log("boxes", boxes);
  return (
    <>
      <WrapperDiv>
        {boxes.map((box, index) => {
          return <Box {...box} onClick={boxClick} key={index} />;
        })}
      </WrapperDiv>
    </>
  );
};

export default GameWrapper;

import React，{useffect，useState}来自“React”；
从“./lib/utils”导入{shufflarray，addBoxProperties，distanceBeween}；
从“/Box”导入框；
从“./elements/WrapperDiv”导入WrapperDiv；
常量boxesArray=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]；
导出常量shuffleArray=shuffleArray（boxesArray）；
常量GameWrapper=（）=>{
const[box，setbox]=useState（[]）；
useffect（（）=>{
立根盒（generateBox（ShuffleArray））；
}, []);
const generateBox=（boxArr）=>{
常数tempBox=[]；
boxArr.forEach（（框，索引）=>{
tempBox[索引]={
…addBoxProperties（索引），
盒子，
};
});
返回临时框；
};
常量框单击=（框）=>{
const emptyBox=box.find（（空）=>empty.box==16）；
const emptyboxidex=box.indexOf（emptyBox）；
const-boxIndex=box.findIndex（（index）=>index.box==box.box）；
const distance=距离（盒子、空盒子）；
if（距离、邻居）{
交换（箱索引、空箱索引）；
}
};
常量交换=（clickedBoxIndex，emptyBoxIndex）=>{
设tempArr=[…框]；
tempArr[emptyBoxIndex]=框[clickedBoxIndex]；
tempArr[clickedBoxIndex]=0；
挫折（（）=>[…节拍]）；
};
控制台日志（“框”，框）；
返回(
{box.map（（box，index）=>{
返回；
})}
);
};
导出默认游戏包装器；

请询问我是否需要进一步澄清，或者你是否认为我的做法是正确的

先谢谢你，

---

Erik

您的交换方法是错误的。试着这样做：

  const swap = (clickedBoxIndex, emptyBoxIndex) => {
    let tempArr = [...boxes];
    const tempBox = tempArr[emptyBoxIndex] // Keep a pointer since the next line will overwrite this box
    tempArr[emptyBoxIndex] = boxes[clickedBoxIndex];
    tempArr[clickedBoxIndex] = tempBox;

    setBoxes(tempArr); // Why were you passing a method here?
  };

另外，你判断这些盒子是否是邻居的逻辑似乎没有正常工作，但我想这不是问题的一部分：）