返回上一屏幕时响应调用函数和设置状态

Question

我是 React 世界的新手

我有 2 个屏幕：股票和条形码。 在库存中，我导航到条形码的屏幕。 当我扫描条形码时，我会返回上一个屏幕我想用条形码设置输入文本并调用一个函数。在我的示例中 joinData();

问题是设置输入文本并调用函数。 我尝试了示例和答案，但我找不到或不明白该怎么做。

我在 componentDidUpdate() 中尝试了一些东西，但它失败了 不变违规：超过最大更新深度

Stock.js

import React, {useState} from "react";
import { ScrollView, TouchableWithoutFeedback, Dimensions, StyleSheet, FlatList, View,     Alert, TouchableOpacity, TextInput } from 'react-native';

//galio
import { Block, Text, theme } from "galio-framework";

import { Button, Icon, Input } from "../components/";

export default class Stock extends React.Component {
constructor(props) {  
super(props);
this.myRef = React.createRef();
this.array = [];
this.state = {
  arrayHolder: [],
  Input_ITMREF: ''
};
}

// I tried this but it fails 
componentDidUpdate() {
if (this.props.navigation.getParam('itmref') != 'undefined') {
  this.setState({ Input_ITMREF: this.props.navigation.getParam('itmref')});
}
}

componentDidMount() {
  this.setState({ arrayHolder: [...this.array] }) // Rafraîchit la liste
}

joinData = () => {
    vxml = this.state.Input_ITMREF+" I do something";
}

Render() {

return (

  <Block flex>
    <Block row space="evenly">
      <Block center>
        <Input 
          placeholder='Code article'
          onChangeText={data => this.setState({ Input_ITMREF: data })}
          ref={this.myRef}
        />
      </Block>
    </Block>
    <Block center>
        <Button style={styles.button} onPress={() => this.props.navigation.navigate('Barcode')}>Barcode</Button>
        <Text style={{ margin: 10 }}>Post: {this.props.navigation.getParam('itmref')}</Text>
    </Block>
  </Block>
    );
  }
}

和 Barcode.js

import React, {} from 'react';
import { ScrollView, TouchableWithoutFeedback, Dimensions, StyleSheet, FlatList, View, Alert, TouchableOpacity, TextInput } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { Button } from "../components/";

export default class Barcode extends React.Component {
   static navigationOptions = {
     header: null //hide the header bar
   };

   handleBarCodeScanned = ({ type, data }) => {
    this.props.navigation.navigate("Stock", {
      itmref: data
    });
  };

  render() {
    return (
       <BarCodeScanner
            onBarCodeScanned={this.handleBarCodeScanned}
            style={styles.barcodeScanner}
          />
    );
  }
}

Answer 1

您可以将状态处理函数作为道具传递给条形码屏幕，并使用它为状态中的textInput 设置值。 有货（状态）

state = {
   inputValue: ''
}
....
const setInputTextValue= (newValue) => {
   this.setState({
   inputValue: newValue
})

您将此函数作为道具传递给 Barcode 场景，并在您想设置新值时调用它（考虑到 Stock 场景仍然挂载）。

更新：What is the proper way to update a previous StackNavigator screen?

我刚刚看到的另一个解决方案：Updating State of Another Screen in React Navigation

Answer 2

当您从 Barcodepage 回到 stockPage 时，您需要使用 WillFocus 方法（包含在 react-navigation 中）

componentDidMount(){
    console.log("willFocus runs") initial start

    const {navigation} = this.props;
    navigation.addListener ('willFocus', async () =>{
      console.log("willFocus runs") // calling it here to make sure it is logged at every time screen is focused after initial start
    });
}

有关更多信息，请阅读此文档 https://reactnavigation.org/docs/function-after-focusing-screen/