Question

我尝试从“ userPrincipalName” 中仅提取用户名，然后将其作为参数连接到Axios调用中。

“ userPrincipalName” 对象留在 BANANA PAGE 中，我想在 APPLE PAGE 中再次使用它。

在 BANANA页面中，将其设置在 localStore 内，并呈现如下功能：

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visibleModal: 3,
      azureLoginObject: {},
      loginSuccess: false,

    };
    this.azureInstance = new AzureInstance(credentials);
    this._onLoginSuccess = this._onLoginSuccess.bind(this);

    localStore.setItem('userPrincipalName', 'foo');

  }

  _onLoginSuccess() {
    this.azureInstance.getUserInfo().then(result => {
      this.setState({
        loginSuccess: true,
        azureLoginObject: result,
      });
      console.log(result);
    }).catch(err => {
      console.log(err);
    })
  }


  render() {
    if (!this.state.loginSuccess) {

      return (
        <AzureLoginView
          azureInstance={this.azureInstance}
          onSuccess={this._onLoginSuccess}
        />)
    }

    if (this.state.visibleModal === 3) {
      const { givenName } = this.state.azureLoginObject;
      const { userPrincipalName } = this.state.azureLoginObject;

      return (
        <View style={styles.container}>
        </View>
      );
    }
    return (
      <PlacesNavigator />
    );
  }
}

现在我想在 APPLE PAGE 中使用它，但我不知道该怎么做

这是我尝试的示例：

export default class MainScreen extends Component {
    constructor(props) {
        super(props);
        this.state = { data: [] };
    }


    getData = () => {
        const userPrincipalName = localStore.getItem('userPrincipalName');

        this.setState({ isLoading: true, data: [] })
        axios.get("https://harigotphat1.mekorot.co.il/ConfirmPackaotWS/OrderApprove/OrderApp_Get_Orders_To_Approve/"+userPrincipalName.split('@')[0])
            .then(res => {
                this.setState({
                    isLoading: false,
                    data: res.data
                });
                console.log(res.data);
            });
    }

    componentDidMount() {
        this.props.navigation.setParams({ getData: this.getData });
        this.getData()
    }

    renderItems = (item, index) => {
        const { merhavid, yaamID, ezorID, shemEzor } = item;
        return (
            <TouchableHighlight style={{
                backgroundColor: '#ffff78'
            }}>
                <TouchableOpacity
                    onPress={() => this.props.navigation.navigate("Info")}>
                    <Text style={styles.name}>
                        {ezorID + "" + "      |" + "               " + merhavid + " " + yaamID + " " + shemEzor}
                    </Text>
                </TouchableOpacity>
            </TouchableHighlight>
        );
    }


    render() {

        return (
            <>
                <View style={styles.container}>
                    <FlatList
                        data={this.state.data}
                        keyExtractor={(_, index) => String(index)}
                        renderItem={({ item, index }) => { return this.renderItems(item, index) }}

                    />
                </View>

                <View style={styles.bottomMainContainer}>
                    <View style={styles.bottomView} >
                        <Text style={styles.bottomTextStyle}>סה"כ: {this.state.data.length} רשומות</Text>
                    </View>
                </View>
            </>
        );
    }
}

Answer 1

因为它是状态上的对象，所以我认为它是一个变化的变量。如果您需要跨页面访问它，而另一页面是首页的 child 组件，则可以简单地将其作为对孩子的支持。

如果是同级，则可以通过回调函数将其传递给父级，然后回调函数将其作为道具传递给同级。

最方便的方法是使用Redux，它将全局存储该变量，然后通过将每个组件连接到Redux存储，可以在想要的所有页面中检索它。

Answer 2

在“香蕉页”中

export const { userPrincipalName } = this.state.azureLoginObject;

在苹果页面中

import { userPrincipalName } from "./Banana";

Answer 3

如果您的应用程序protocol://host:port在页面中相同，那么localStorage将非常方便。

您要在香蕉页中设置状态的任何地方

_onLoginSuccess() {
    this.azureInstance.getUserInfo().then(result => {
      this.setState({
        loginSuccess: true,
        azureLoginObject: result,
      });
      const { userPrincipalName } = result;
      localStore.setItem('userPrincipalName', userPrincipalName);
      console.log(result);
    }).catch(err => {
      console.log(err);
    })
  }

然后在所有其他页面中可以访问

const userPrincipalName = localStore.getItem('userPrincipalName');

Answer 4

您可以使用道具和状态。概念由下面的示例代码解释您可以尝试使用以下

在App.js内部

// pass s3Value to App2 class
<App2 s3Value={this.state.s3 />

在App2.js内部

constructor(props) {
       super(props);
       this.state = {
        z1:props.s3Value
       }
}

可以在构造函数内部以及在render（）方法内部使用道具，如下所示。并且也可以在方法内部使用

render() {
    var z1= this.props.s3Value;
    ...
}

有没有一种方法可以使用另一个页面中的对象？

4 个答案: