【发布时间】：2020-08-13 15:36:02
【问题描述】：
您好，我的项目有一些问题。 首先在NewCases2.jsx中，我做了POST API的方法来获取app_uid，我在控制台上试了一下，数据就出现了。
但是当我将 app_uid 数据发送到下一页时，该值变为未定义。 有关更多详细信息，您可以查看以下脚本：
import React, { Component, Fragment } from 'react';
import './NewCases2.css'
import user2 from '../../images/user2.png';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Axios from 'axios';
class NewCases2 extends Component {
constructor(props) {
super(props)
this.state = {
token: sessionStorage.getItem("access_token"),
username: sessionStorage.getItem("username"),
user_role: '',
search: '',
app_uid: '',
inMemoryCases: [],
dataSess: [],
allcases: [],
dataApps: [],
dataUser: [],
}
}
componentDidMount() {
if (window.sessionStorage.getItem("access_token") === null) {
this.props.history.push('/');
}
Axios.get('https://bpm.**************.or.id/api/1.0/***************/extrarest/login-user',
{
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
}
})
.then((result) => {
console.log(result.data);
this.setState({
dataUser: result.data
})
this.getUserRole(this.state.dataUser.uid)
})
Axios.get('https://bpm.**************.or.id/api/1.0/**************/extrarest/session-id',
{
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
}
})
.then((result) => {
console.log(result.data);
this.setState({
dataSess: result.data
})
})
Axios.get('https://bpm.**************.or.id/api/1.0/**************/case/start-cases',
{
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
}
})
.then((result) => {
console.log(result.data);
this.setState({
allcases: result.data,
inMemoryCases: result.data
})
})
}
onTask = (pro, tas) => {
const apiUrl = 'https://bpm.**************.or.id/api/1.0/**************/cases'
const dataApp = {
'pro_uid': pro,
'tas_uid': tas,
}
Axios.post(apiUrl, dataApp,
{
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
},
}).then((result) => {
console.log(result.data);
this.setState({
dataApps: result.data
});
})
}
getUserRole = (uid) => {
Axios.get(`https://bpm.**************.or.id/api/1.0/**************/user/${uid}`,
{
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
}
})
.then(result => result.json())
.then(resultJSON => {
if (resultJSON.usr_role == "PROCESSMAKER_ADMIN") {
this.setState({ user_role: 'Administrator' })
} else if (resultJSON.usr_role == "PROCESSMAKER_OPERATOR") {
this.setState({ user_role: 'Operator' })
} else if (resultJSON.usr_role == "PROCESSMAKER_MANAGER") {
this.setState({ user_role: 'Manager' })
}
})
}
render() {
console.log(this.state.dataApps.app_uid)
return (
<Fragment>
<div className="background-nya">
<div className="header">
<Link style={{ textDecoration: 'none' }} to="/menu">
<p className="headerLabel-fix"> ************* </p>
</Link>
<p className="headerLabelUser"> {this.state.username} </p>
<p className="headerLabelPass"> {this.state.user_role} </p>
<img className="userIcon" src={user2} />
</div>
<p className="titlePage"> PROCESS LIST </p>
<div className="form-search">
<input type="text" value={this.state.search} onChange={this.searchData} placeholder="search"></input>
</div>
<Fragment>
<br />
{
this.state.allcases.map((process) => {
return (
<Fragment>
{/* This is when I deactivate the Link function to switch pages and the app_uid appears on
the console */}
{/* <Link
to={{
pathname: "/dynaform",
state: {
uid: this.state.dataApps.app_uid,
session: this.state.dataSess
}
}}
> */}
<div className="caseList" onClick={this.onTask.bind(this, process.pro_uid, process.tas_uid)}>
{process.pro_title}
</div>
{/* </Link> */}
</Fragment>
)
}
)
}
</Fragment>
</div>
</Fragment>
)
}
}
export default NewCases2;
从上面的脚本（没有链接功能）来看，帖子数据如下所示：
NewCases2.jsx: 92 {app_uid: "3205285525f34df467df8d0053057805", app_number: 325641}
NewCases2.jsx: 121 3205285525f34df467df8d0053057805
然后这是我在发送会话 ID 和 UID 数据的同时将链接功能添加到 / dynaform 时
import React, { Component, Fragment } from 'react';
import './NewCases2.css'
import user2 from '../../images/user2.png';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Axios from 'axios';
class NewCases2 extends Component {
constructor(props) {
super(props)
this.state = {
token: sessionStorage.getItem("access_token"),
username: sessionStorage.getItem("username"),
user_role: '',
search: '',
app_uid: '',
inMemoryCases: [],
dataSess: [],
allcases: [],
dataApps: [],
dataUser: [],
}
}
componentDidMount() {
if (window.sessionStorage.getItem("access_token") === null) {
this.props.history.push('/');
}
Axios.get('https://bpm.**********.or.id/api/1.0/**********/extrarest/login-user',
{
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
}
})
.then((result) => {
console.log(result.data);
this.setState({
dataUser: result.data
})
this.getUserRole(this.state.dataUser.uid)
})
Axios.get('https://bpm.**********.or.id/api/1.0/**********/extrarest/session-id',
{
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
}
})
.then((result) => {
console.log(result.data);
this.setState({
dataSess: result.data
})
})
Axios.get('https://bpm.**********.or.id/api/1.0/**********/case/start-cases',
{
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
}
})
.then((result) => {
console.log(result.data);
this.setState({
allcases: result.data,
inMemoryCases: result.data
})
})
}
onTask = (pro, tas) => {
const apiUrl = 'https://bpm.**********.or.id/api/1.0/**********/cases'
const dataApp = {
'pro_uid': pro,
'tas_uid': tas,
}
Axios.post(apiUrl, dataApp,
{
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
},
}).then((result) => {
console.log(result.data);
this.setState({
dataApps: result.data
});
})
}
getUserRole = (uid) => {
Axios.get(`https://bpm.**********.or.id/api/1.0/**********/user/${uid}`,
{
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
}
})
.then(result => result.json())
.then(resultJSON => {
if (resultJSON.usr_role == "PROCESSMAKER_ADMIN") {
this.setState({ user_role: 'Administrator' })
} else if (resultJSON.usr_role == "PROCESSMAKER_OPERATOR") {
this.setState({ user_role: 'Operator' })
} else if (resultJSON.usr_role == "PROCESSMAKER_MANAGER") {
this.setState({ user_role: 'Manager' })
}
})
}
render() {
console.log(this.state.dataApps.app_uid)
return (
<Fragment>
<div className="background-nya">
<div className="header">
<Link style={{ textDecoration: 'none' }} to="/menu">
<p className="headerLabel-fix"> ************* </p>
</Link>
<p className="headerLabelUser"> {this.state.username} </p>
<p className="headerLabelPass"> {this.state.user_role} </p>
<img className="userIcon" src={user2} />
</div>
<p className="titlePage"> PROCESS LIST </p>
<div className="form-search">
<input type="text" value={this.state.search} onChange={this.searchData} placeholder="search"></input>
</div>
<Fragment>
<br />
{
this.state.allcases.map((process) => {
return (
<Fragment>
<Link
to={{
pathname: "/dynaform",
state: {
uid: this.state.dataApps.app_uid,
session: this.state.dataSess
}
}}
>
<div className="caseList" onClick={this.onTask.bind(this, process.pro_uid, process.tas_uid)}>
{process.pro_title}
</div>
</Link>
</Fragment>
)
}
)
}
</Fragment>
</div>
</Fragment>
)
}
}
export default NewCases2;
然后我之前发送的数据在 DNNewCases.jsx 页面上这样控制台
import React, { Component, Fragment } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Iframe from 'react-iframe'
import '../NewCases/NewCases.css'
import user2 from '../../images/user2.png';
class DNNewCases extends Component {
constructor(props) {
super(props)
this.state = {
username: sessionStorage.getItem("username"),
token: sessionStorage.getItem("access_token"),
session: this.props.location.state.session,
uid: this.props.location.state.uid,
}
}
componentDidMount() {
if (window.sessionStorage.getItem("access_token") === null) {
this.props.history.push('/');
}
}
render() {
console.log("Props APP_UID : ", this.state.uid);
console.log("Props Session ID : ", this.state.session);
return (
<Fragment>
<div className="background-nya">
<div className="header">
<Link style={{ textDecoration: 'none' }} to="/menu">
<p className="headerLabel-fix"> ************* </p>
</Link>
<p className="headerLabelUser"> {this.state.username} </p>
<p className="headerLabelPass"> {this.state.user_role} </p>
<img className="userIcon" src={user2} />
</div>
<div>
<Iframe src={'https://bpm.*************.or.id/*************/en/neoclassic/cases/open?APP_UID=' + this.state.uid + '&DEL_INDEX=1&action=EDIT&sid=' + this.state.session}
width="100%"
height="100%"
display="block"
position="fixed" />
</div>
</div>
</Fragment>
)
}
}
export default DNNewCases;
从上面的脚本来看，控制台上显示的数据只是会话id，而uid是未定义的。
DNNewCases.jsx: 31 Props APP_UID: undefined
DNNewCases.jsx: 32 Props Session ID: 3149643205f34e042776f23096193239
那么，如何使 DNNewCases.jsx 控制台中 app_uid 的值不未定义。
我希望在这里找到解决方案。 谢谢~
【问题讨论】：
标签： javascript reactjs react-native api