Reactjs 可重用组件原因警告：无法从其他组件的功能体内部更新组件

所以我尝试使用可重复使用的组件。下面是脚本

Button.js

import React, {Component} from 'react';
import {TouchableOpacity, Text} from 'react-native';
import styles from '../components/styles';

class MyButton extends React.Component {
  constructor(props) {
    super(props);
    this.onPress = this.props.onPress;
    this.title = this.props.title;
  }
  render() {
    return (
      <TouchableOpacity
        onPress={this.onPress}
        style={styles.appButtonContainer_login}>
        <Text style={styles.appButtonText}>{this.title}</Text>
      </TouchableOpacity>
    );
  }
}

export default MyButton;

const App = () => {
  setInterval(() => RNBootSplash.hide(), 1000);
  return <MainStackNavigator />;
};

export default App;

我的

MainStackNavigator

const Stack = createStackNavigator();
function MainStackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          options={{headerShown: false}}
          component={WelcomeScreen}
        />
        <Stack.Screen
          name="Login"
          options={{headerTitleAlign: 'center', headerLeft: null}}
          component={LoginScreen}
        />
        <Stack.Screen
          name="Register"
          options={{headerTitleAlign: 'center', headerLeft: null}}
          component={RegisterScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default MainStackNavigator;

当我运行它时，会收到此错误消息

警告：无法从组件的函数体内部更新组件 不同的组成部分

---

当我从

WelcomeScreen

中删除

MyButton

时，没有错误。所以我认为这就是导致错误的原因。如何修复它？

MyButton的

onPress

prop/

TouchableOpacity

需要传递一个函数变量给它。但是，您正在传递函数调用的结果

handle\u navigation

，该结果无效

一个简单的修复方法是更改

句柄\u导航

，使其返回一个函数：

const handle\u导航=（名称）=>{
return（）=>navigation.navigate（名称）；
};

您还可以将箭头函数直接传递给按下按钮的

onPress

prop，IMHO更清楚一点：

<View style={styles.button_container}>
  <MyButton onPress={() => handle_navigation('Login')} title="Login" />
  <MyButton onPress={() => handle_navigation('Register')} title="Register" />
</View>

handle_navigation（'Login'）}title=“Login”/>
handle_导航（'Register'）}title=“Register”/>

您应该在MyButton中使用功能组件而不是类组件 像

import React，{Component}来自'React'；
从“react native”导入{TouchableOpacity，Text}；
从“../components/styles”导入样式；
const MyButton=props=>{
返回(
{props.title}
);
}
导出默认MyButton；

也许这对你有帮助

在欢迎屏幕上

<MyButton onPress={() => handle_navigation('Login')} title="Login" />
<MyButton onPress={() => handle_navigation('Register')} title="Register" />

handle\u导航（'Login'）}title=“Login”/
handle_导航（'Register'）}title=“Register”/>

import React, {Component} from 'react';
import {TouchableOpacity, Text} from 'react-native';
import styles from '../components/styles';

const MyButton = props => {
  return (
    <TouchableOpacity
      onPress={props.onPress}
      style={styles.appButtonContainer_login}
    >
      <Text style={styles.appButtonText}>{props.title}</Text>
    </TouchableOpacity>
  );
}

export default MyButton;

<MyButton onPress={() => handle_navigation('Login')} title="Login" />
<MyButton onPress={() => handle_navigation('Register')} title="Register" />