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

【问题标题】：state callback firing objects are not valid error状态回调触发对象无效错误
【发布时间】：2019-05-02 10:19:18
【问题描述】：

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

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

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

未捕获的错误：对象作为 React 子对象无效（发现：对象与键 {dispatchConfig、_targetInst、nativeEvent、type、target、currentTarget、eventPhase、bubbles、cancelable、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;

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

结束...我认为您的包装器应该看起来更像：

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

编辑：

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

【讨论】：