返回上一个屏幕时的响应调用功能和设置状态

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场景）。