我的状态值应该重新渲染整个组件并且应该将我的其他状态值再次设置为默认值但它没有发生

Question

import React from "react"


export default function Components() {
    const PI = 3.14
     
    const [value, setValue] = React.useState("")
    const [inputvalue, setInputvalue] = React.useState(0)

    function calculation() { 
        const originalvalue = PI * inputvalue * inputvalue

        setValue(`${originalvalue} cm^2`)
        console.log(value)
    }
    
    function getInput (event) {
        setInputvalue(event.target.value)
        
    }   

    console.log("main")

    return (
        <div className="output">
            <h4>Enter the r of the circle below in cm</h4>
           
           <input onChange={getInput} type="number"  name="input"/>

           <button onClick = {calculation}> Show Area</button>

           <p>Area of the circle is : {value}</p>
        </div>

    )
}

所以每当我输入一个数字时，我的组件都会重新渲染（我用控制台日志检查了它）但是我的输出值是一个状态值（圆的面积是：{value}）仍然停留在页。相反，当组件重新渲染时，需要再次将其指定为“”。但它没有发生，我的代码工作正常。我只是想了解这怎么可能

Answer 1

您的 getInput 正在更新 inputvalue，而不是 value。

要让您的输入元素的 onChange 处理程序更新 UI 内容，getInput 需要更像：

function getInput (event) {
    setValue(event.target.value)
}

我的状态值应该重新渲染整个组件并且应该将我的其他状态值再次设置为默认值但它没有发生

My state value should be re-rendering the whole component and that should put my other state value to default again but it's not happening

javascript

components

state

function

reactjs