有没有办法使用另一个页面中的对象?

Question

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

"userPrincipalName">对象保留在BANANA PAGE中，我想在APPLE PAGE再次使用它。

在BANANA财务会计软件页面中，我将其设置在本地商店中并渲染如下函数：

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 />
);
}
}

现在我想在苹果页面中使用它，但我不明白该怎么做

这是我的尝试示例：

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

由于它是状态上的对象，因此我假设它是一个不断变化的变量。如果您需要跨页面访问它，并且另一个页面是第一页的子组件，您可以简单地将其作为道具传递给子页面。

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

执行此操作最方便的方法是使用Redux，它将全局存储变量，然后您可以通过将每个组件连接到 Redux 存储来在所需的所有页面中检索它。

Answer 2

在香蕉页面中

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

在苹果页面中

import { userPrincipalName } from "./Banana";

Answer 3

您可以使用 props 和 state。 概念由下面的示例代码解释 您可以尝试在下面使用

在应用程序内部.js

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

在应用程序内部2.js

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

可以在构造函数中使用 props，也可以在 render(( 方法中使用 props，如下所示。并且也可以在方法内部使用

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

Answer 4

如果您的应用程序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');