React中如何从外部函数获取变量到组件中？

1. 修正createCombos函数 #

原函数里的arr是局部变量，外部无法直接访问，需要让函数返回生成的数组，同时增加输入有效性判断避免异常：

export function createCombos(number_of_cells) {
  const num = parseInt(number_of_cells);
  // 校验输入是否为有效数字且是完全平方数
  if (isNaN(num) || Math.sqrt(num) % 1 !== 0) {
    return [];
  }
  const real_number = Math.sqrt(num);
  return Array(real_number)
    .fill(0)
    .map(() => Array(real_number).fill(0));
}

2. 修正Board组件逻辑 #

• 调用createCombos时直接接收返回值，用它更新状态
• 给useEffect添加空依赖数组，确保仅组件挂载时执行一次
• 修复map的返回问题，保证JSX元素被正确返回，同时添加唯一key符合React要求

import { createCombos } from "../functions/Combo";
import { useEffect, useState } from "react";

export default function Board() {
  const [arra, setArra] = useState([]);

  useEffect(() => {
    const input = prompt("enter a number:");
    const resultArr = createCombos(input);
    setArra(resultArr);
  }, []);

  return (
    <div>
      {arra.map((row, rowIndex) => (
        <p key={rowIndex}>{row.join(", ")}</p>
      ))}
    </div>
  );
}

关键说明 #

• 函数内部的局部变量不能通过函数名.变量名的方式访问，必须通过函数返回值传递数据
• React列表渲染必须给每个元素添加唯一key属性
• useEffect不指定依赖数组会导致无限循环，空数组仅在组件挂载时执行一次
• 增加输入校验可以避免非完全平方数、非数字输入引发的错误

内容的提问来源于stack exchange，提问作者Tugba Ozkan