Javascript 在带有挂钩的ReactJS中设置数组

我目前有一个FooBar对象数组

interface FooBar {
    foo: string,
    bar: string,
    correct: string,
    other: string[]
}
const [arrOfObj, setArrOfObj] = useState<FooBar[]>([
        { "foo": "foolicious ", "bar": "barlicious", "correct": "foobarlicious", "other": ["oof", "f00", "rab", "r@b"]},
]);
const [shuffledArrOfObj, setShuffledArrOfObj] = useState<FooBar[]>([
        { "foo": "", "bar": "", "correct": "", "other": [""]},
]);

接口FooBar{
傅：字符串，
酒吧：字符串，
正确：字符串，
其他：字符串[]
}
常量[arrOfObj，setArrOfObj]=useState([
{“foo”：“傻瓜”，“酒吧”：“愚蠢”，“正确”：“foobarlicious”，“其他”：[“oof”，“f00”，“rab”，”r@b"]},
]);
const[shuffledArrOfObj，setShuffledArrOfObj]=useState([
{“foo”：“bar”：“correct”：“other”：[“”]}，
]);

但是，我想随机洗牌每个对象中的“其他”数组，因此我有一个洗牌函数：

useEffect(() => {
        (async () => {
            const act = await shuffleObjs();
            setShuffledArrOfObj([...act]);
        })();

}, [arrOfObj]);

const shuffleObjs = () => {
      let holdArr = [...arrOfObj];
      for (let i: number = 0; i < holdArr.length; i++) {
            holdArr[i].other = await handleShuffle(holdArr[i].other);
        }
}

const handleShuffle = async (array: string[]) => {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }

        return array;
}

useffect（（）=>{
（异步（）=>{
const act=wait shuffleObjs（）；
setShuffledArrOfObj（[…法案]）；
})();
}，[arrOfObj]）；
常量shuffleObjs=（）=>{
设holdArr=[…arrOfObj]；
for（设i:number=0；i{
对于（设i=array.length-1；i>0；i--）{
常数j=数学楼层（数学随机（）*（i+1））；
[array[i]，array[j]=[array[j]，array[i]]；
}
返回数组；
}

但是，如果在“shuffleObjs”函数的末尾输入console.log（holdArr），则对象数组与存储在shuffledArryObj状态下的对象数组完全不同

我是否以错误的方式设置了阵列状态，还是缺少了什么

---

编辑：错别字不是问题，它仍然不能正常工作。我还尝试将arrOfObj添加到dep阵列。

您缺少两件事：

useEffect(() => {
        (async () => {
            const act = await shuffleObjs();
            setShuffledArrOfObj([...act]);
        })();

}, [arrOfObj]); //<-- Add arrOfObj to dependency Array

const shuffleObjs = () => {
      let holdArr = [...arrOfObj];
      for (let i: number = 0; i < holdArr.length; i++) {
            holdArr[i].other = await handleShuffle(hold[i].other); //<-- change hold[i] to holdArr[i]
        }
}

useffect（（）=>{
（异步（）=>{
const act=wait shuffleObjs（）；
setShuffledArrOfObj（[…法案]）；
})();
}，[arrOfObj]）；//{
设holdArr=[…arrOfObj]；
for（设i:number=0；iholdArr[i].other=wait handleShuffle（hold[i].other）；//您缺少两件事：

useEffect(() => {
        (async () => {
            const act = await shuffleObjs();
            setShuffledArrOfObj([...act]);
        })();

}, [arrOfObj]); //<-- Add arrOfObj to dependency Array

const shuffleObjs = () => {
      let holdArr = [...arrOfObj];
      for (let i: number = 0; i < holdArr.length; i++) {
            holdArr[i].other = await handleShuffle(hold[i].other); //<-- change hold[i] to holdArr[i]
        }
}

useffect（（）=>{
（异步（）=>{
const act=wait shuffleObjs（）；
setShuffledArrOfObj（[…法案]）；
})();
}，[arrOfObj]）；//{
设holdArr=[…arrOfObj]；
for（设i:number=0；iholdArr[i].other=wait handleShuffle（hold[i].other）；//尝试将
shuffledArrOfObj
传递到依赖项数组这里是传递给handleShuffle（）的hold[i]数组。它不应该是holdArr[i]我尝试将ShuffleOBJ添加到dep数组中，这会导致重复和无限的重新加载。请尝试将
shuffledArrOfObj
传递到依赖项数组这里是传递给handleShuffle（）的hold[I]数组。它不应该是holdArr[I]我尝试将ShuffleOBJ添加到dep数组中，这导致了重复和无限的重新加载。我尝试了两个修复，最终的数组现在是“相同的”对象重复多次，就像在数组中被洗牌一样，但是对于所有具有相同foo、bar和correct值的数组，元素的顺序都是相同的。我尝试了两种修复方法，最后的数组现在是“相同的”对象重复多次，就像在数组中被洗牌一样，但是对于具有相同foo、bar和correct值的所有数组，元素的顺序都是相同的。