状态回调触发对象无效错误

Question

我试图使用回调将验证输入。

当我试图在文本框中输入时，我遇到了下面的错误。有人能帮我解释一下为什么我会犯这个错误，以及我如何纠正它吗。

不允许回调吗？我错过了什么？

未捕获错误：对象作为React子对象无效（找到：具有键{dispatchConfig、_TargetList、nativeEvent、type、target、currentTarget、eventPhase、bubbles、cancelable、timeStamp、defaultPrevented、isTrusted、isDefaultPrevented、isPropagationStopped、_dispatchListeners、_dispatchInstances}的对象）。如果要呈现子对象集合，请改用数组。在div中（由HelloWorldWithProperties5创建）在HelloWorldWithProperties5中（由Parent2创建）在Parent2中（由App创建）在div中（由App创建）在App at invariant中（react dom.development.js:55）

    import * as React from 'react';
interface IProps{
    userName?:string
}
const HelloWorldWithPropertiesES5= (props:IProps)=>{   
    return (
        <div>
            Hello {props.userName}
        </div> 
    )
    }

    export default HelloWorldWithPropertiesES5;

   import * as React from 'react'

interface IProps {
    userName : string;
    onChange : (event:any) => void;

  }

  export const NameEditComponent = (props : IProps) => 
  <>
  <h2>this shows event changes</h2>
    <label>Update name:</label>
    <input value={props.userName} 
           onChange={props.onChange}
    />

  </>

export default NameEditComponent;

 import * as React from 'react';
import HelloWorldWithPropertiesES5 from 'src/Lesson2-Properties/HelloES5';
import NameEditComponent from './MyChild';

interface IState {
  userName : string;
}

export class Parent2 extends React.Component<{},IState> {
  constructor(props:any) {
    super(props);

    this.state = {userName: 'defaultUserName'};
  }

  public setUsernameState = (newName:string) => {
          this.setState({userName:newName},()=>this.validateName());
    }



      public validateName () {
        if (this.state.userName.length === 0) {
         alert('error')

        }
      }

  public render() {
    return (
        <>
      <HelloWorldWithPropertiesES5 userName={this.state.userName} />
      <NameEditComponent userName={this.state.userName} onChange={this.setUsernameState} />
    </>
    );
  }
}

export default Parent2;

Answer 1

1. 在调用setState方法之前，请尝试验证您的用户名

包裹起来...我认为你的包装应该看起来更像：

public setUsernameState = (event) => {
  const {newName} = event.target;
  if (!this.validateName(newName)) {
    customMethodToSetErrors();
  }
  this.setState({userName: newName});
}

编辑：

对不起，，我不知道setState的回调是做什么的...所以你的回调很好，你的问题应该只是处理程序的参数类型和你获得新值的方式：）所以试着从事件对象参数中获得一个新值。

Answer 2

我不是一个打字专家，所以也许我的签名类型有点不对劲，但应该是这样的：

public setUsernameState = (event: object) => {
  this.setState({ userName: event.target.value }, () => this.validateName());
}