javascript - 如何修复 React JS 中设置状态的钩子(Hook)？

Question

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

到目前为止，我正在使用一个简单的钩子(Hook)，并且 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'));

一如既往地感谢任何帮助!

Answer 1

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

这就是您的问题的原因。 e.target.value 是一个字符串，您将 col 设置为等于 string。因此，[...Array(col).keys()] 为您提供长度为 1 的数组。

const col = '5';
console.log([...Array(col).keys()]);

改变

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

至

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