如何在功能组件 reactJS 中获得 for 循环

Question

我想知道是否可以得到一些帮助，我目前正在尝试重新学习 ReactJS，我正在做这个任务，这是一个可以帮助孩子们学习时间表的小应用程序。 当用户点击网格中的一个数字时，该数字的所有倍数都会改变颜色/做某事。我目前有以下内容，但如果可能的话，我真的很感激最后一点的帮助:
我有映射到网格的数字，
我有一个函数可以从我通过的数字数组中找到你通过的任何数字的倍数，
但我正在努力让两者相互合作，目前我有用户在单击网格上的数字时选择的数字的值，但我似乎无法在multipleFinder 函数作为参数，它甚至不将其识别为第二个参数。我尝试将整个函数移动到函数组件 MapThis 但我一直收到错误
TypeError: Cannot read property 'length' of undefined
或
TypeError: Cannot read property '0' of undefined
我已经尝试移动它并更改代码，但我似乎一直收到相同的错误或没有太多响应，我已经尝试让它工作好几天了，我认为它可以可能是循环错误？ / 试图在功能组件中使用它。我不确定我是否只是在尝试实现目标的错误道路，但任何帮助将不胜感激！谢谢！ :)

目前我的组件文件中的所有内容：

import './NumberGridStyles.css';

// Get all the numbers from 1 - 144
let numbersStart = 1;
let numbersEnd = 144;
let allNumbers = Array(numbersEnd - numbersStart + 1)
    .fill()
    .map(() => numbersStart++);

function MultipleFinder(allthenumbers, multipleno) {
    var multiples = [allNumbers];
    for (var i = 0; i < allthenumbers.length; i++) {
        if (allthenumbers[i] % multipleno === 0) {
            multiples.push(allthenumbers[i]);
        }
    }
    return multiples;
}
// return MultipleFinder();
console.log(MultipleFinder(allNumbers, 20));


// Map all 1 - 144 numbers to the grid
export const MapThis = () => {

    function showTheMultiples(allNumbers) {
        console.log(allNumbers);
        MultipleFinder(allNumbers, 6);
        console.log(MultipleFinder(allNumbers, 10))
    }
    return (
        <div>
            <div className="wrapper">
                {allNumbers.map(allNumbers => (
                    <div className="box" key={allNumbers.toString()} onClick={() => showTheMultiples(allNumbers)}>
                        {allNumbers}
                    </div>
                ))}
            </div>
            <div>
            </div>
        </div>
    )
}

CSS 文件：

body {
    margin: 40px;
  }

  .wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-gap: 10px;
    background-color: #fff;
    color: #444;
  }

  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
  }

Screenshot of the grid and the array of numbers based on the second parameter you pass through

Answer 1

我只是将allnumbers.map 中的var 名称更改为number，并将map 中的所有出现都更改为它；并且，将showTheMultiples函数改成实际显示所有数字列表和多个数字列表，它可以工作了。

export const MapThis = () => {

    function showTheMultiples(number) {
        console.log(allNumbers);
        MultipleFinder(allNumbers, number);
        console.log(MultipleFinder(allNumbers, number))
    }

    return (
        <div>
            <div className="wrapper">
                {allNumbers.map(number => (
                    <div className="box" key={number.toString()} onClick={() => showTheMultiples(number)}>
                        {number}
                    </div>
                ))}
            </div>
            <div>
            </div>
        </div>
    )
}

如果你想改变多个元素的样式，你可以添加一个状态来保存多个元素的列表和一个获取 allNumbers var 和 multipleNumbers (state var) 的 renderList 函数。因此，对于 allNumers 列表中的每个项目，您可以验证它是否在 multipleNumbers 内，如果是真的，将样式更改为“multiple”或类似的东西，如果不是将样式更改为“box”。

如果你想要一个代码示例

当用户点击网格中的数字时，该数字的所有倍数都会改变颜色/做某事

...try this link。这是一个解决了您的问题的沙盒。