javascript - 如何在功能组件reactJS中使用for循环

Question

我想知道是否可以获得一些帮助，我目前正在尝试重新学习 ReactJS，并且我正在完成这项任务，这是一个可以帮助 children 学习乘法表的小应用程序。 当用户单击网格中的数字时，该数字的所有倍数都会改变颜色/执行某些操作。我目前有以下内容，但如果可能的话，我真的很感谢最后一点的帮助:
我有映射到网格的数字，
我有一个函数，可以从我通过的数字数组中找到您通过的任何数字的倍数，
但是我正在努力让两者协同工作，目前我拥有用户单击网格上的数字时选择的数字的值，但我似乎无法在multipleFinder 函数作为参数，它甚至不将其识别为第二个参数。我尝试将整个函数移动到功能组件 MapThis 中，但我不断收到错误
类型错误:无法读取未定义的属性“长度”
或
类型错误:无法读取未定义的属性“0”
我尝试过移动它并更改代码，但我似乎不断收到相同的错误或没有太多响应，我已经尝试让它工作好几天了，我认为它可以也许是循环错误？/尝试在功能组件中使用它。我不确定我是否只是在错误的道路上实现我想要实现的目标，但任何帮助将不胜感激!谢谢你! :)

当前组件文件中的所有内容:

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 内，如果是 true，请将样式更改为“multiple”或类似的内容，如果不是，请将样式更改为“box”。

如果您想要一个代码示例

When the user clicks on a number from the grid then all the multiples of that number would change colour / do something

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