与 Js/React 数组相关的问题

Question

我正在创建一个 indexes 的数组，我在其中附加值（稍后将在映射函数中使用）。

let indexes = [];
export default function SortTiles() {

    let num = info.num_tiles;
    for (let i = 10; i < num+10; i++) {
        indexes = [...indexes, i];
    }
    console.log(indexes);
    console.log("UWU")

    return(
        <div id={"sort-tiles"}>
            {/*{indexes.map(makeTiles)}*/}
        </div>
    )
}

但是当我尝试 console.log 我的数组时，这是我得到的输出： The output image 输出被打印了两次，数组中的数字也重复了。

Answer 1

不确定您想要实现什么，但这不是处理数组或 React 组件中任何数据的正确方法。

试试这个，这可能会对您有所帮助，或者可能会解决您的问题。

import {useState, useEffect} from 'react';

export default function SortTiles() {

  const [indexes, setIndexes] = useState([]);

  useEffect(() => {
    let num = 20;
    let indexArr = []
    for (let i = 10; i < num+10; i++) {
      indexArr = [...indexArr, i];
    }
    setIndexes(indexArr);
  }, [])


return(
    <div id={"sort-tiles"}>
        {indexes.map((ind) => (<div>{ind}</div>))}
    </div>
)
}

Answer 2

数组被打印两次很可能是因为您在 strict mode 中，它双重呈现组件以帮助捕获错误。

幸运的是，它帮助你抓住了一个！这些值是重复的，因为 indexes 变量是在函数外部声明的。由于您永远不会将其重置为空值，因此每个 re-render 将继续添加索引。尝试在函数内部初始化它。

与 Js/React 数组相关的问题

Issue related to Js/React arrays

javascript

html

arrays

reactjs

web