javascript - 使用 Hooks 在 ReactJS 中设置数组

Question

我目前有一组 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": [""]},
]);

但是我想随机洗牌每个对象中的“其他”数组，所以我有一个洗牌功能：

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;
}

但是，如果我在“shuffleObjs”函数的末尾使用 console.log(holdArr)，则对象数组与存储在 shuffledArryObj 状态下的对象数组完全不同。

我是否以错误的方式设置数组状态，或者我缺少什么？

编辑：错字不是问题，它仍然无法正常工作。我还尝试将 arrOfObj 添加到 dep 数组中。

标签： javascriptreactjstypescriptreact-hooks

Answer 1

你错过了两件事：

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]
        }
}