如何让 for 循环在功能组件 reactJS 中工作

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'.

如果你想要一个代码示例

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。这是一个解决了你的问题的沙盒。

如何让 for 循环在功能组件 reactJS 中工作

How do I get a for loop working within a functional component reactJS

javascript

for-loop

syntax-error

reactjs

react-functional-component