Javascript 如何在React JS中修复钩子以设置状态？

我试图让用户设置一个带有输入编号的函数变量。我有一个他们输入数字的表格，需要将列常量设置在顶部

到目前为止，我使用的是一个简单的钩子，正在设置col（我在控制台中记录了它），但它并没有生成所需的数组。我想在代码底部的切换过程中会出现一些混乱

function DataFrame(){

  const [toggle, setToggle] = React.useState(false);
  const [col, setCol] = useState(0)
  var element = <li class="element"/>
  var row = 3
  var arr = []
  var i
  for (i = 0; i<row; i++){
    arr.push(element)
  }

  const Element = () => <li className="element" />;
  console.log(col)
  return (

    <div>
      <div >

        <div style={{fontFamily:'PressStart2P',opacity:'45%', width:'360px',
        position:'absolute',left:'36px', top: '160px',color:'rgb(143, 0, 145)'}}>
        </div>

        <div >
          <h1 class="dfHeader" style={{left:'30px'}}>
          DataFrames :<br></br></h1>
          <h1  class='dfHeader2'style={{top:'150px',left:'30px'}}>
          constructor</h1>

          <div class="codeBorder" style={{scrollbarColor:'#6a00ff'}}>
          <div class="textbox" style={{width:'180px'}}>
          <p class="instructions"></p>
          <p class="instructions2"></p>

          <p class="instructions3">
          <form class="codeForm">
            <label>
            enter dimensions:
            <input type="number" name="dimension" onKeyUp=
            {e => setCol(e.target.value)} />
            </label>
              <input class='goButton' type="submit" value="run" />
          </form>
            <br/><br/></p>
          <p class="instructions3">
          <form class="codeForm">
            <label>
            input code:
              <input type="number" name="dimension" />
            </label>
              <input class='goButton' type="submit" value="run" />
          </form></p>
          <p class="instructions3">
          <form class="codeForm">
            <label>
            input code:
              <input type="number" name="dimension" />
            </label>
              <input class='goButton' type="submit" value="run" />
          </form></p>
          <p class="instructions3">
          <form class="codeForm">
            <label>
            input code:
              <input type="number" name="dimension" />
            </label>
              <input class='goButton' type="submit" value="run" />
          </form> </p>

          </div>
          </div>

          <div class="btnConsole">
            <button class="dfButton" onClick={()=>setToggle( (prev) => (!prev) )}>
            </button>
          </div>
          </div>

          <div class="monitor"style={{}}>
          <div class="superScreen">
            <div class="screenDiv" >
              <div id="subScreen" class="subScreen">

                {[...Array(col).keys()].map(ul => (
                  <ul key={ul}>
                    {toggle &&
                      [...Array(row).keys()].map(
                        li => <Element key={li} />)}
                  </ul>
                ))}

              </div>
            </div>
          </div>
          </div>
        <br/>
      </div>
    </div>
  )
}

export default DataFrame;

ReactDOM.render(<DataFrame />, document.getElementById('root'));

函数数据帧（）{
const[toggle，setToggle]=React.useState（false）；
const[col，setCol]=useState（0）
变量元素=

变量行=3
var arr=[]
变量i
对于（i=0；i
；
控制台日志（col）
返回(
数据帧：


建造师



输入尺寸：
setCol（e.target.value）}/>




输入代码：


输入代码：


输入代码：

setToggle（（prev）=>（！prev））}>
{[…数组（col）.keys（）].map（ul=>(

{切换&&
[…数组（行）.keys（）].map(
li=>）}

))}


)
}
导出默认数据帧；
ReactDOM.render（，document.getElementById（'root'））；

我们将一如既往地感谢您的帮助

onKeyUp={e => setCol(e.target.value)}

这就是问题的原因。

e.target.value

是一个字符串，您将

col

设置为等于

string

。因此，

[…Array（col.keys（）]

为您提供长度为1的数组

const col='5'；
console.log（[…Array（col）.keys（））；

你想要的数组是什么样子的？我想要的数组是n，不管输入的数字是什么。它是一个列表元素数组。因此，如果我将“row”设置为9，用户在表单中输入5，那么数组将是一个9 x 5的列表元素数组。我正准备编辑我的响应以添加：）当前，行设置为3，如果我输入任何数字，我只会得到一个1 x 3的数组。添加了实际的代码块：）您的意思是要设置上面问题第一行中的函数参数吗？