react在组件render()中渲染两次，第一次渲染成功，第二次返回的函数是undefine

Question

我在写一个登录页面的时候。
在父组件中写的<LoginForm icon='mobile' onChange={()=>this.handleChange()}/>

在子组件内用<input className='number-input' type={filetype} onChange={this.props.onChange} value={this.state.value}/>
为此是想获取输入框的值，然后在父组件内写入constuctor(){super(); this.state={value:''}}

但控制台报错说value为空，然后我把子组件的value设为空，在控制器中给state.value一个值，就能够打印出state.value的值，然后我在子组件内render（）{}下，return之上打印this.props.onChange这个函数，在浏览器中打印了两次，一次返回的是函数function，一次返回的undefine，请问这是什么问题，该如何解决啊。。。

Answer 1

• 父组件：

class LoginForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {value: ''}
    }
    
    render() {
        return(
            <SubForm value={this.state.value} onChange={value => this.changeHandle(value)}/>
        );
    }
    
    changeHandle(value) {
        this.setState({value});
    }
}

• 子组件：

const SubForm = ({value, onChange}) => {
    return(
        <input value={value} onChange={e => onChange(e.target.value)}/>
    );
}

Answer 2

按你写的这个没有错啊！能打印出来啊，