javascript - For Loop 未按预期工作，乘以 10

Question

我是 JavaScript React 的新手。无法理解为什么这个非常简单的 For-Loop 不能按预期工作？我显然希望它能够控制台。记录 amountOfPeople 的值，但是当我将 amountOfPeople 更改为 2 时，由于某种原因它最多计数为 20。当我将其更改为 3、4、5 等时也是如此。它乘以我的 10。

这是我的App.js：

import React from "react"

import Main from "./components/Main"

function App() {
  const [amountOfPeople, setAmountOfPeople] = React.useState(1)

  function handleChange(event) {
    const {name, value} = event.target
    if (name === "amountOfPeople") {
      setAmountOfPeople(value)
    }
  }

  return (
    <div>
      <Main 
        amountOfPeople={amountOfPeople}
        handleChange={handleChange}
       />
    </div>
  )
}

export default App

主.js

import React from "react"

import InitialForm from "./InitialForm"

function Main(props) {
    return (
        <InitialForm 
            amountOfPeople={props.amountOfPeople}
            handleChange={props.handleChange}
        />
    )
}

export default Main

InitialForm.js

import React from "react"

function InitialForm(props) {
    for (let index = 1; index < (props.amountOfPeople+1); index++) {
        console.log(index) 
    }
    

    return (
        <form>
            <label>Amount of people:</label>
            <select name="amountOfPeople" value={props.amountOfPeople} onChange={props.handleChange}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </form>
    )
}

export default InitialForm

标签： javascriptreactjsloopsfor-loop

Answer 1

下拉列表的value是一个字符串，当您将事件向上冒泡时，它就amountOfPeople变成了一个字符串。所以当你这样做时：

for (let index = 1; index < (props.amountOfPeople+1); index++) {
    console.log(index) 
}

假设您选择了2然后代码变为

for (let index = 1; index < ("2"+1); index++) {
    console.log(index) 
}

"2" + 1是“21”，但随后它被强制转换为一个数字 - 数字21

确保value始终是一个数字，在它前面加上+

setAmountOfPeople(+value)

现场示例：

function App() {
  const [amountOfPeople, setAmountOfPeople] = useState(1)

  function handleChange(event) {
    const {name, value} = event.target
    if (name === "amountOfPeople") {
      setAmountOfPeople(+value)
    }
  }

  return (
    <div>
      <Main 
        amountOfPeople={amountOfPeople}
        handleChange={handleChange}
       />
    </div>
  )
}


function Main(props) {
    return (
        <InitialForm 
            amountOfPeople={props.amountOfPeople}
            handleChange={props.handleChange}
        />
    )
}


function InitialForm(props) {
    for (let index = 1; index < (props.amountOfPeople+1); index++) {
        console.log(index) 
    }
    

    return (
        <form>
            <label>Amount of people:</label>
            <select name="amountOfPeople" value={props.amountOfPeople} onChange={props.handleChange}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </form>
    )
}


ReactDOM.render(<App />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<script>
  var {
    useReducer,
    useEffect,
    useState,
    useRef,
    useCallback
  } = React
</script>
<div id="root"></div>