Angular Redux-Form初始化报错：TypeError: 无法读取null的'firstName'属性

嘿，咱们来解决你遇到的这个表单初始化错误！从错误栈能看出来，问题根源是redux状态里绑定表单的那个节点是null，导致angular-redux/form在尝试读取firstName属性时直接抛出了类型错误。下面给你几个针对性的解决办法：

1. 给Redux状态的表单节点设置初始空对象 #

最根本的解决方式是在你的redux reducer里，把表单绑定的状态节点初始值从null改成包含所有表单字段的空对象。比如：

// 示例reducer代码
const initialState = {
  // 原来可能是user: null，现在改成下面这样
  user: {
    firstName: '',
    lastName: ''
    // 其他表单字段对应设置空字符串或合适的默认值
  }
};

function userReducer(state = initialState, action) {
  // ...你的reducer逻辑
}

这样angular-redux/form初始化时就能正常读取user.firstName，不会因为user是null报错了。

2. 在组件里给表单字段加兜底值 #

如果暂时没法修改reducer的初始状态，那就在组件初始化表单的时候，先判断状态是否为null，给字段设置 fallback 值：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NgRedux } from '@angular-redux/store';
import { IAppState } from '../store';

@Component({
  // 你的组件元数据
})
export class YourFormComponent implements OnInit {
  userForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private ngRedux: NgRedux<IAppState>
  ) {}

  ngOnInit() {
    // 如果状态里的user是null，就用空对象兜底
    const userState = this.ngRedux.getState().user || {};
    this.userForm = this.fb.group({
      firstName: [userState.firstName || '', Validators.required],
      lastName: [userState.lastName || '']
    });

    // 之后再执行redux-form的连接逻辑
  }
}

3. 检查redux-form的连接配置 #

再确认下你用@connectForm或者connect方法时，指定的状态路径对应的节点是不是真的有初始值。比如你的连接代码如果是这样：

@connectForm({
  form: 'userForm',
  state: 'user' // 这个路径对应的状态不能是null哦
})

一定要保证store初始化时state.user不是null，而是一个有效的对象，哪怕是空的也行。

总的来说，这个错误的核心就是绑定表单的redux状态数据源是null，导致库内部遍历状态时读不到属性。只要确保初始状态是个有效的对象，问题就能解决啦！

内容的提问来源于stack exchange，提问作者Marshall Alex