React Child Component onChange事件触发两次

Question

我正在研究图标选择组件。

在子组件中，像这样处理 func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) { //fetch Data and save in local datastore here. } ：

this.props.onChange

在父级中，我像这样使用此组件：

handleClick( val ){
        this.setState({ value: val });
        this.props.onChange( val );
}



render(){
      return(
        <div 
            key={ index } 
            className={
                classnames(
                    'icon-item-box',
                    {'active-icon': name == this.state.value}
                )
            }
            onClick={ () => this.handleClick( name ) }>
                <div><i className={ name }></i></div>
                <span>{ name }</span>
        </div>
      );
}

当我选择一个图标（即单击图标）时，如果第一次单击<TheIconPicker value={ icon } onChange={ (val) => { setAttributes( { icon: val } ) console.log( icon ); } } /> 的值将在控制台中打印两次，否则，当您单击其他图标时，它将首先打印旧值，然后是当前值。

有人知道为什么会发生吗？