React Native复制旧状态：能否使用ReactJS语法？

嘿，我完全懂你这种困惑！其实React和React Native在状态管理的核心逻辑上是一致的——都遵循状态不可变原则，也就是不能直接修改原状态对象/数组，必须创建新的引用。但你遇到的语法不生效甚至报错的情况，大概率是两个场景下的细节差异导致的，我来拆解一下：

为什么你的ReactJS语法可能失效？ #

• 依赖浏览器DOM的API：ReactJS里有些写法可能用到了document、window这类浏览器专属对象，或者依赖DOM的第三方库，这些在React Native的JavaScriptCore环境里是不存在的，自然会抛出错误。
• 状态更新的错误姿势：哪怕在ReactJS里，直接修改原状态（比如数组push、对象直接赋值）其实也是不符合规范的，只是某些情况下浏览器环境没立刻报错，但React Native对状态不可变的要求执行得更严格，直接修改原状态就会导致状态不更新甚至报错。

正确的状态复制/更新写法（React & React Native通用） #

不管是React还是React Native，状态更新都要通过创建新的引用实现，下面举两个常见场景的例子：

函数组件（useState Hook） #

假设你要更新一个数组状态：

import { useState } from 'react';

const ExampleComponent = () => {
  const [list, setList] = useState(['item1', 'item2']);

  // 错误写法：直接修改原数组，状态不会更新甚至报错
  // list.push('item3');
  // setList(list);

  // 正确写法：基于旧状态创建新数组
  const addItem = () => {
    setList(prevList => [...prevList, 'item3']);
  };

  return (
    // 组件内容
  );
};

类组件 #

如果是类组件的setState：

import React, { Component } from 'react';

class ExampleComponent extends Component {
  state = { list: ['item1', 'item2'] };

  addItem = () => {
    // 错误写法：直接修改原状态
    // this.state.list.push('item3');
    // this.setState({ list: this.state.list });

    // 正确写法：基于旧状态创建新对象/数组
    this.setState(prevState => ({
      list: [...prevState.list, 'item3']
    }));
  };

  render() {
    // 组件内容
  }
}

排查建议 #

如果还是不确定问题出在哪，可以检查这几点：

• 你的代码里有没有用到浏览器专属的API（比如document.getElementById这类DOM操作）
• 状态更新时是不是直接修改了原状态对象/数组，而没有创建新的引用
• 有没有引入只支持ReactJS的第三方库（比如依赖DOM的UI组件库）

如果能贴出具体的报错代码和错误信息，就能更精准地定位问题啦！

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