Question

我正在尝试使用回调来验证输入。

当我尝试在文本框中键入内容时，出现以下错误。有人可以帮我为什么会出现错误以及如何纠正它。

是否允许回调？我想念什么？

未捕获的错误：对象作为React子对象无效（找到：带有键{dispatchConfig，_targetInst，nativeEvent，type，target，currentTarget，eventPhase，气泡，cancellable，timeStamp，defaultPrevented，isTrusted，isDefaultPrevented，isPropagationStopped，_dispatchListeners的对象，_dispatchInstances}）。如果要渲染子级集合，请改用数组。在div中（由HelloWorldWithPropertiesES5创建）在HelloWorldWithPropertiesES5中（由Parent2创建）在Parent2中（由App创建）在div中（由App创建）在应用程式中不变（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

处理程序正在返回事件，而不是直接返回值。
我不是打字专家，所以也许我的签名类型有些偏离，但应该是这样的：

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

Answer 2

在调用setState方法之前尝试验证您的用户名
我认为输入的onChange方法会将事件变量推送到您的处理程序，而事件不是字符串。因此，也许在您的setUsernameState中，您需要获取event.target.value之类的输入值

包装...我认为您的包装纸应该看起来像：

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

编辑：

对不起，我不知道setState的回调函数是什么...所以您的回调函数很好，您的问题应该只是处理程序的参数类型和获取新值的方式:)因此，请尝试获取一个新值。事件对象参数的值。

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

2 个答案: