React Native出现setState is not a function报错如何修复

错误根因 #

setState是Test1组件内部通过useState声明的局部方法，仅能在Test1组件内部访问，你无法直接通过组件本身作为prop传递后调用该方法，组件实例本身默认不会对外暴露内部声明的变量/方法，因此调用Test1.setState会抛出类型错误。

修复方案 #

方案1：状态提升（推荐） #

将共享状态提升到公共父组件App中管理，分别将状态和修改状态的方法传递给需要的子组件，符合React单向数据流规范，逻辑可追踪性更强。
修复后完整代码：

import React, { useState } from "react";
import { Text, View, Button } from "react-native";

const Test = ({ setTest1State }) => {
  return (
    <Button
      title="切换状态"
      onPress={() => {
        setTest1State(true);
      }}
    />
  );
};

const Test1 = ({ state }) => {
  if (state) {
    return <Text>Test Working</Text>;
  } else {
    return <Text>Test Not Working</Text>;
  }
};

const App = () => {
  const [test1State, setTest1State] = useState(false);
  return (
    <View>
      <Test setTest1State={setTest1State} />
      <Test1 state={test1State} />
    </View>
  );
};

export default App;

方案2：ref暴露方法（仅特殊场景使用） #

如果需要保留状态在Test1内部管理，可通过forwardRef+useImperativeHandle的组合，对外暴露指定的修改方法。
修复后完整代码：

import React, { useState, useRef, forwardRef, useImperativeHandle } from "react";
import { Text, View, Button } from "react-native";

const Test = ({ test1Ref }) => {
  return (
    <Button
      title="切换状态"
      onPress={() => {
        test1Ref.current?.setState(true);
      }}
    />
  );
};

const Test1 = forwardRef((props, ref) => {
  const [state, setState] = useState(false);
  useImperativeHandle(ref, () => ({
    setState: (value) => setState(value)
  }));
  if (state) {
    return <Text>Test Working</Text>;
  } else {
    return <Text>Test Not Working</Text>;
  }
});

const App = () => {
  const test1Ref = useRef(null);
  return (
    <View>
      <Test test1Ref={test1Ref} />
      <Test1 ref={test1Ref} />
    </View>
  );
};

export default App;

该方案会破坏数据流的可追踪性，仅建议在状态完全属于子组件内部、父组件仅需要极少触发修改的场景下使用。

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