setState 不是本机反应中的函数

Question

我正在学习 react native，一直收到这个错误 setState is not a function in react native 我搜索了很多，但没有任何帮助。

我创建了这个简化的代码来显示问题

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

const Test = ({ Test1 }) => {
  return (
    <Button
      onPress={() => {
        Test1.setState(true);
      }}
    />
  );
};

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

const App = () => {
  return (
    <View>
      <Test Test1={Test1} />
    </View>
  );
};

export default App;

这是错误：TypeError: Test1.setState is not a function

请帮我解决这个问题。

Answer 1

状态只能作为道具转移到其他组件。您需要从 App 调用 Test1 组件，从 Test1 调用 Test 组件，然后您可以从 Test1 将 props 传递给 Test。这样，您无需将状态移动到其他组件。您不能将任何组件作为道具传递并从那里访问状态或方法。你可以试试这个代码：

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

const Test = ({ setState}) => {
  return (
    <Button
      onPress={() => {
        setState(true);
      }}
    />
  );
};

const Test1 = () => {
  const [state, setState] = useState(false);

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

const App = () => {
  return (
    <View>
      <Test1  />
    </View>
  );
};

export default App;

Answer 2

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

const Test = ({ setState }) => {
  return (
    <Button
      onPress={() => {
           setState(true);
      }}
  );
};

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

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

export default App;

Answer 3

这里有两个问题。

1. 您的 Test1 组件根本没有被使用
2. 钩子和一般的本地函数不能在声明它们的组件之外调用

如果您想在测试组件中管理某些本地状态，则它需要存在于该组件中。