React报错TypeError: this.state is null修复及动态增删Div状态修改问题

我来帮你一步步梳理问题并解决，先看代码里的几个关键错误：

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

这个报错的核心原因是方法名拼写错误导致this绑定失效：

• 你在构造函数里绑定的方法是manageDiv，但实际定义的方法写成了manangeDiv（多了一个字母n）。点击按钮时调用的是一个未绑定this的方法，导致this的指向不再是组件实例，自然this.state就变成null了。
• 解决办法：把方法名统一改成manageDiv，确保构造函数绑定、方法定义和按钮调用的名字完全一致。

二、正确修改状态的位置和方式 #

React的状态遵循不可变性原则，不能直接修改原状态数组，必须创建新数组来更新状态，否则React可能无法检测到状态变化，导致组件不重新渲染。同时你的解构语法也有错误，我们逐一调整：

1. 修正解构错误
   原代码里const { array } = this.state.array;是错误的，应该从this.state中解构出array，或者直接创建原数组的副本（推荐后者，避免意外修改原状态）：

// 正确的解构方式
const { array } = this.state;
// 或者创建原数组的副本
const newArray = [...array];

2. 添加Div的正确状态更新
   不要直接用array.push(array[0])修改原数组，而是创建新数组合并原元素和新增元素。另外建议给初始状态添加一个默认Div，避免数组为空时array[0]为undefined：

if (type === "add") {
  const newArray = [...array, array[0]];
  this.setState({ array: newArray });
}

3. 移除Div的正确状态更新
   不要用splice修改原数组（splice会直接修改原数据），而是用slice创建新数组（slice不会改变原数组），同时要判断数组不为空时再操作：

else if (type === "remove") {
  if (array.length > 0) {
    const newArray = array.slice(1);
    this.setState({ array: newArray });
  }
}

三、修正后的完整代码 #

class ReplicateDiv extends React.Component {
  constructor(props) {
    super(props);
    // 初始状态添加一个默认Div，避免添加时出现undefined
    this.state = { array: ["Dynamic Div"] };
    this.manageDiv = this.manageDiv.bind(this);
  }

  // 修正方法名拼写错误
  manageDiv(e, type) {
    const { array } = this.state;
    
    if (type === "add") {
      // 创建新数组添加元素，遵循不可变性
      const newArray = [...array, array[0]];
      this.setState({ array: newArray });
    } else if (type === "remove") {
      // 数组不为空时才执行移除操作
      if (array.length > 0) {
        const newArray = array.slice(1);
        this.setState({ array: newArray });
      }
    }
  }

  render() {
    return (
      <div>
        {/* 修正按钮调用的方法名 */}
        <button type="button" onClick={e => this.manageDiv(e, "add")}> add </button>
        <button type="button" onClick={e => this.manageDiv(e, "remove")}> remove </button>
        {this.state.array.map((item, index) => {
          return <div key={index}> {item} </div>;
        })}
      </div>
    );
  }
}

额外小提示 #

• 用index作为key在动态列表里是不推荐的，最好给每个Div生成唯一标识（比如自增ID、uuid），避免列表重排时出现渲染异常。
• 也可以用箭头函数定义方法，省去手动绑定this的步骤：

  manageDiv = (e, type) => {
    // 方法内容不变
  }
  

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