React Native Redux登录表单报displayName未定义TypeError错误

首先直接点明：这个错误既不是native-base组件的问题，也不是你的action creator写法错误，根源是LoginForm组件里的一处JSX语法错误。

具体原因 #

看你LoginForm组件里的这段代码：

<Item floatingLabel>
  <Label>email</Label>
  <Input onChangeText={this.onEmailChange.bind(this)} value={this.props.email} />
} {/* 此处存在多余大括号，为语法错误 */}
</Item>

这个多余的}彻底破坏了JSX的结构——它相当于提前结束了Item组件的子内容，导致后面的</Item>变成了无对应开标签的无效代码。

为什么只有调用action creator时才报错？因为当你输入内容触发onEmailChange时，会调用action更新Redux状态，而通过connect关联的LoginForm组件会随之重新渲染。这时候React会重新解析错误的JSX结构，生成异常的虚拟DOM，导致native-base的Item组件在内部处理子元素时，试图读取某个未正确初始化的组件的displayName属性，最终抛出Cannot read property 'displayName' of undefined的错误。而清空onEmailChange后，输入不会触发状态更新，组件不重渲染，这个语法错误暂时被React的初始渲染容错性掩盖了。

修复步骤 #

1. 移除多余的大括号，修正后的邮箱输入项代码：

<Item floatingLabel>
  <Label>email</Label>
  <Input onChangeText={this.onEmailChange.bind(this)} value={this.props.email} />
</Item>

2. 补充AuthReducer的初始状态：你的Reducer里用到了INITIAL_STATE但未定义，需要添加：

const INITIAL_STATE = { email: '' }; // 根据业务需求设置初始值
export default (state = INITIAL_STATE, action ) => {
  console.log(action.payload);
  switch (action.type) {
    case EMAIL_CHANGED :
      return { ...state, email: action.payload};
    default:
      return state;
  }
}

3. 修复passwordChange的this绑定问题：当前写法下输入密码时会触发this指向错误，推荐用箭头函数简化：

passwordChange = (text) => {
  this.props.passwordChanged(text);
}

验证 #

修复后重新运行项目，输入邮箱时就不会再触发该错误了，你的action creator和native-base组件的用法都是正确的。

内容的提问来源于stack exchange，提问作者Sai Krishna