如何在 ReactJS 中将数据发送到另一个页面
Posted
技术标签:
【中文标题】如何在 ReactJS 中将数据发送到另一个页面【英文标题】：How to send data to another page in ReactJS 【发布时间】：2020-11-12 21:54:21 【问题描述】：这里我在 ReactJS 中有一个问题，在 NewCases.jsx 的 POST fetch 部分。那里会生成数据，即app_uid，然后我想将app_uid数据从NewCases.jsx发送到DNNewCases.jsx，但我不知道怎么做。 这是完整的脚本：
NewCases.jsx
import React, Component, Fragment from 'react';
import './NewCases.css'
import user2 from '../../images/user2.png';
import BrowserRouter as Router, Route, Link from 'react-router-dom';
import DNNewCases from '../DynaformCases/DNNewCases';
class NewCases extends Component
constructor(props)
super(props)
this.state =
token: sessionStorage.getItem("access_token"),
username: sessionStorage.getItem("username"),
user_role: '',
allcases: [],
inMemoryCases: [],
showProcess: [],
dataSess: [],
app_uid: '',
dataselanjutnya: '',
search: '',
this.getDetailCase = this.getDetailCase.bind(this);
this.searchData = this.searchData.bind(this);
componentDidMount()
if (window.sessionStorage.getItem("access_token") === null)
this.props.history.push('/');
fetch('https://bpm.*************.or.id/api/1.0/************/extrarest/session-id',
method: 'GET',
headers:
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
,
).then((response) => response.json())
.then((responseJson) =>
console.log(responseJson);
this.setState(
dataSess: responseJson,
);
);
fetch("https://bpm.***********.or.id/api/1.0/***********/extrarest/login-user",
method: 'GET',
headers:
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
).then(result => result.json()).then(resultJSON =>
this.getUserRole(resultJSON.uid);
)
fetch('https://bpm.**************.or.id/api/1.0/************/case/start-cases',
method: 'GET',
headers:
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
,
).then((response) => response.json())
.then((responseJson) =>
console.log(responseJson[0]);
this.setState(
allcases: responseJson,
inMemoryCases: responseJson,
);
);
getUserRole = (uid) =>
fetch("https://bpm.***********.or.id/api/1.0/************/user/" + uid,
method: 'GET',
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' )
)
getDetailCase(pro, tas)
fetch("https://bpm.***************.or.id/api/1.0/************/cases/",
method: 'POST',
headers:
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
,
body: JSON.stringify(
'pro_uid': pro,
'tas_uid': tas,
),
).then((response) => response.json())
.then((responseJson) =>
this.setState(
showProcess: responseJson,
);
this.state.app_uid = (this.state.showProcess.app_uid);
);
searchData = (event) =>
this.setState( search: event.target.value )
const searchData = this.state.inMemoryCases.filter(
data =>
let lowerCase = (data.pro_title).toLowerCase()
let searchLowerCase = this.state.search.toLowerCase()
return lowerCase.indexOf(searchLowerCase) > -1;
);
this.setState( allcases: searchData );
render()
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>
<br />
this.state.allcases.map((process) =>
this.getDetailCase(process.pro_uid, process.tas_uid)
return (
<Fragment>
<Link
to=
pathname: "/dynaform",
state: this.state.app_uid
>
<div key=process.pro_uid className="caseList" onClick=this.alertShow>
process.pro_title
</div>
</Link>
</Fragment>
)
)
</div>
</Fragment>
)
export default NewCases;
DNNewCases.jsx
import React, Component, Fragment from 'react';
import user2 from '../../images/user2.png';
import BrowserRouter as Router, Route, Link from 'react-router-dom';
import Iframe from 'react-iframe'
class DNNewCases extends Component
constructor(props)
super(props)
this.state =
username: sessionStorage.getItem("username"),
token: sessionStorage.getItem("access_token"),
dataSess: [],
componentDidMount()
if (window.sessionStorage.getItem("access_token") === null)
this.props.history.push('/');
fetch('https://bpm.**********.or.id/api/1.0/**********/extrarest/session-id',
method: 'GET',
headers:
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.token,
,
).then((response) => response.json())
.then((responseJson) =>
console.log(responseJson);
this.setState(
dataSess: responseJson,
);
);
render()
return (
<Iframe url= 'https://bpm.************.or.id/***********/en/neoclassic/cases/open?APP_UID=&DEL_INDEX=1&action=EDIT&sid=' + this.state.dataSess
display="block"
position="fixed" />
)
export default DNNewCases;
希望我能在这里找到解决方案。非常感谢
【问题讨论】：
this.state.app_uid = (this.state.showProcess.app_uid); - 你正在直接改变你的状态。我建议在setState 中设置这个新的 app_uid
【参考方案1】：
我建议使用“react-redux”。
使用mapDispatchToProps 和一些操作，您可以将新数据保存在reducer 中，然后您可以使用mapStateToProps 访问数据。
上面的链接提供了一些示例，我个人推荐来自techsith 的 youtube 教程。
【讨论】：
【参考方案2】：您可以在组件之间导航时使用道具，
看看this，在路由器链接之间传递数据
如果没有更好的解决方案，请尝试使用Redux。
youtube教程点击here
【讨论】：
【参考方案3】：我建议使用withRouter
export default withRouter(props => <NewCases ...props />);
来自 ReactTraining 文档：
您可以访问历史对象的属性和最近的 的匹配通过 withRouter 高阶组件。带路由器 将更新的匹配、位置和历史道具传递给包装的 组件无论何时呈现。
一旦您可以访问您的history，请使用此 sn-p 重新路由：
this.props.history.push(`/someRoute`);
在您的 API 调用之后以及将正确的状态设置为 app_uid 之后，只需在您的 setState 回调中调用此 sn-p。正如我在评论中所说，您似乎正在直接改变您的状态。我强烈建议在setState 函数中设置新的app_uid
附带说明：我没有看到您的 Route 配置。此答案假定您至少已在原始代码库上设置了客户端路由。
【讨论】：
以上是关于如何在 ReactJS 中将数据发送到另一个页面的主要内容，如果未能解决你的问题，请参考以下文章