React项目npm start报错：this是保留字，求代码排查与优化方案

嘿，我来帮你搞定这个问题！你遇到的「this is a reserved word」语法错误是有明确原因的，我先给你拆解清楚，再把代码里的其他坑都填上，最后给你点优化建议：

一、核心错误原因（导致「this是保留字」报错） #

你在字符串拼接和setState里错误地用了{this.state.page}这种写法——只有在JSX模板或者用反引号`包裹的模板字符串里，才能用{变量}的插值语法，普通JS代码里直接写变量名就行，多余的花括号会被当成对象语法，从而触发“this是保留字”的错误。比如：

• 错误写法：'https://swapi.com/api/people/'+{this.state.page}
• 错误写法：page: {this.state.page}+1

二、代码里的其他隐藏问题 #

除了这个核心错误，还有几个地方会导致代码运行失败：

• 方法名不匹配：你定义的方法是getNextPers，但按钮的onClick绑定的是this.getNextPerson，少了一个字母，点击按钮会直接报错“方法不存在”。
• map方法语法错误：this.state.personagens.map(pers, i) => (...)的写法不对，map的回调函数参数必须放在括号里，正确是(pers, i) => (...)。
• axios响应数据处理错误：axios返回的p是完整的响应对象，真正的人物数据在p.data.results里（SWAPI的接口返回结构是包含results数组的对象），你直接展开p是拿不到人物列表的。
• 状态属性拼写错误：state里定义的是personagens，但setState里写成了personages，拼写不一致会导致状态无法正确更新。
• 页码递增写法错误：{this.state.page}+1里的花括号多余，应该改成this.state.page + 1。

三、修正后的完整代码 #

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class List extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      personagens: [],
      page: 1,
    };
    this.getNextPers = this.getNextPers.bind(this);
  }

  getNextPers(){
    // 用模板字符串更简洁，也可以用字符串拼接：'https://swapi.dev/api/people/?page=' + this.state.page
    const URL = `https://swapi.dev/api/people/?page=${this.state.page}`;
    axios.get(URL)
      .then(response => {
        // 用函数式更新state，确保拿到最新的旧状态值
        this.setState(prevState => ({
          personagens: [...prevState.personagens, ...response.data.results],
          page: prevState.page + 1
        }));
      })
      .catch(error => {
        // 加上错误处理，方便调试
        console.error('获取人物数据失败：', error);
      });
  }

  render(){
    return (
      <div>
        <p>Personagens</p>
        {this.state.personagens.map((pers, i) => (
          <div key={i}>
            <p>{pers.name}</p>
          </div>
        ))}
        <button onClick={this.getNextPers}>Proximo Personagem</button>
      </div>
    );
  }
}

ReactDOM.render(<List />, document.getElementById('root'));

注：我把原代码里的swapi.com改成了正确的SWAPI地址swapi.dev，否则请求会失败。

四、优化建议 #

1. 优先用函数式更新state：当新状态依赖旧状态时（比如页码递增、数组拼接），用setState(prevState => {...})的形式，能避免React异步更新state导致的数值偏差。
2. 别用数组索引当key：如果人物有唯一标识（比如SWAPI里的url），最好用这个唯一值作为key，比索引更稳定，能提升列表渲染性能。
3. 改用函数组件+Hook：现在React更推荐函数组件的写法，代码更简洁易维护，给你写个Hook版本的示例：

import React, { useState, useCallback } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

const List = () => {
  const [personagens, setPersonagens] = useState([]);
  const [page, setPage] = useState(1);

  const getNextPers = useCallback(() => {
    const URL = `https://swapi.dev/api/people/?page=${page}`;
    axios.get(URL)
      .then(response => {
        setPersonagens(prev => [...prev, ...response.data.results]);
        setPage(prev => prev + 1);
      })
      .catch(error => {
        console.error('获取人物数据失败：', error);
      });
  }, [page]);

  return (
    <div>
      <p>Personagens</p>
      {personagens.map(pers => (
        <div key={pers.url}>
          <p>{pers.name}</p>
        </div>
      ))}
      <button onClick={getNextPers}>Proximo Personagem</button>
    </div>
  );
};

ReactDOM.render(<List />, document.getElementById('root'));

4. 添加加载状态：可以加个加载中的提示，避免用户点击按钮后没反应，提升体验。

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