Django-React员工管理项目报错：TypeError与key属性警告排查

一、TypeError: this.state is null 错误修复 #

这个错误出现在EditEmployee.jsx中，核心原因是组件未初始化state，也未加载部门数据，同时缺失文件选择方法的绑定：

1. 在构造函数中初始化state，添加departments空数组
2. 新增componentDidMount方法，请求部门接口获取数据
3. 绑定handleFileSelected方法（原代码中调用了该方法但未绑定）

修改后的EditEmployee.jsx关键代码片段：

constructor(props) {
    super(props);
    this.state = { departments: [] }; // 初始化state
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleFileSelected = this.handleFileSelected.bind(this); // 绑定文件选择方法
}

componentDidMount() {
    // 替换为部门接口，而非员工接口
    fetch(process.env.REACT_APP_API+'department/')
    .then(response => response.json())
    .then(data => {
        this.setState({ departments: data });
    });
}

// 补充缺失的handleFileSelected方法
handleFileSelected(event) {
    event.preventDefault();
    this.photo = event.target.files[0].name;
    const formData = new FormData();
    formData.append(
        "myFile",
        event.target.files[0],
        event.target.files[0].name
    );

    fetch(process.env.REACT_APP_API+'employee/saveFile', {
        method:'POST',
        body:formData
    })
    .then(res => res.json())
    .then((result) => {
        // 可按需添加图片地址更新逻辑
    },
    (error) => {
        alert('Failed');
    })
}

二、"Each child in a list should have a unique 'key' prop" 警告修复 #

1. AddEmployee.jsx语法错误 #

部门下拉框的map循环后多了一个分号，这个分号会被React识别为额外的无key子节点，直接删除即可：

// 错误写法
{this.state.departments.map((dep) =>
    <option key={dep.DepartmentId} >
        {dep.DepartmentName}
    </option>
)}; 

// 正确写法
{this.state.departments.map((dep) =>
    <option key={dep.DepartmentId} value={dep.DepartmentName}>
        {dep.DepartmentName}
    </option>
)}

2. Employee.jsx循环内组件无key #

在employees.map循环中，每个<tr>内的<EditEmployee>组件需要添加唯一key：

<EditEmployee
    key={emp.EmployeeId} // 新增唯一key
    show={this.state.editEmployee}
    onHide={editEmployeeClose}
    employeeid={employeeid}
    employeename={employeename}
    department={department}
    photo={photo}
    datejoining={datejoining} />

3. EditEmployee.jsx空option修复 #

原代码中option标签无内容，需要填充部门名称，同时保证key和value的正确性：

{this.state.departments.map(dep => (
    <option 
        key={dep.DepartmentId} 
        value={dep.DepartmentName}
    >
        {dep.DepartmentName} {/* 新增部门名称显示 */}
    </option>
))}

三、DepartmentId与DepartmentName访问问题及验证方法 #

问题根源 #

当前AddEmployee.jsx和EditEmployee.jsx请求的是员工接口（process.env.REACT_APP_API+'employee/'），返回的是员工数据，自然没有DepartmentId和DepartmentName字段，需要修改为请求部门接口（比如process.env.REACT_APP_API+'department/'）。

验证方法 #

1. 控制台打印验证：在componentDidMount的回调中打印返回数据，确认字段存在：

componentDidMount() {
    fetch(process.env.REACT_APP_API+'department/')
    .then(response => response.json())
    .then(data => {
        console.log('部门数据:', data); // 打印数据结构
        this.setState({ departments: data });
    });
}

2. React DevTools验证：打开浏览器开发者工具的React面板，找到AddEmployee或EditEmployee组件，查看state中的departments数组，确认每个元素包含DepartmentId和DepartmentName。

额外修复：Employee.jsx无限循环问题 #

componentDidUpdate中直接调用refreshList()会导致组件无限更新，需添加条件判断：

componentDidUpdate(prevProps, prevState) {
    // 仅当员工列表状态变化时刷新
    if (prevState.employees !== this.state.employees) {
        this.refreshList();
    }
}

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