React报错TypeError: this.state.projectList.map不是函数，求修复方法

我来帮你排查这个问题——你遇到的map is not a function错误，根源出在createProject方法里对数组的更新方式上，咱们一步步来解决：

问题核心 #

在createProject里，你用了this.state.projectList.push(...)来添加新项目，但**Array.push()方法返回的是新数组的长度（一个数字），而不是更新后的数组本身**。这就导致this.state.projectList被意外设置成了数字类型，当渲染时调用map方法，数字当然没有这个方法，所以抛出了类型错误。

修复方案 #

1. 正确更新数组状态（最关键的一步）

React的状态是不可变的，不能直接修改原state数组，我们需要创建一个新数组来更新状态。推荐用ES6的展开运算符（最简洁）：

createProject(title, desc, langs, len, exp) {
  this.setState({
    projectList: [
      ...this.state.projectList, // 展开原数组的所有元素
      {
        title, // 简写语法，等价于title: title
        description: desc,
        language: langs,
        length: len,
        experience: exp
      }
    ]
  });
}

如果你偏好更传统的写法，也可以用concat方法：

createProject(title, desc, langs, len, exp) {
  const newProject = {
    title,
    description: desc,
    language: langs,
    length: len,
    experience: exp
  };
  this.setState({
    projectList: this.state.projectList.concat(newProject)
  });
}

2. 顺便修复deleteProject的小bug

你在deleteProject里写的this.setState({projects});是错的——你的state键名是projectList，不是projects，所以要改成：

deleteProject(title) {
  const updatedProjects = this.state.projectList.filter(
    p => p.title !== title
  );
  this.setState({ projectList: updatedProjects });
}

3. 进阶：用函数式更新更安全

如果你的状态更新依赖于之前的状态，推荐使用函数式的setState，避免因为React状态异步更新导致的意外问题：

createProject(title, desc, langs, len, exp) {
  this.setState(prevState => ({
    projectList: [
      ...prevState.projectList,
      {
        title,
        description: desc,
        language: langs,
        length: len,
        experience: exp
      }
    ]
  }));
}

补充说明 #

React之所以要求我们不直接修改state数组/对象，是因为直接修改不会触发组件的重新渲染，而且像push、pop这类方法会改变原数组的引用，导致React无法检测到状态变化。通过创建新数组的方式，既能保证状态的不可变性，又能让React正确触发渲染更新。

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