Reactjs 从承诺返回链接中获取值
我正在建立一个JS网站Reactjs 从承诺返回链接中获取值,reactjs,asynchronous,promise,async-await,components,Reactjs,Asynchronous,Promise,Async Await,Components,我正在建立一个JS网站 我想通过调用异步函数来访问render（）方法中的链接。我的代码实际上如下所示： <a href={this.getDownloadURL(note.noteId)}> <span className="downloadAction"> DOWNLOAD <img className="logoImageRight" src={require("../imgs/download.png")} alt="NotFo
我想通过调用异步函数来访问render（）方法中的链接。我的代码实际上如下所示：
<a href={this.getDownloadURL(note.noteId)}>
<span className="downloadAction">
DOWNLOAD
<img className="logoImageRight" src={require("../imgs/download.png")} alt="NotFound"/>
</span>
</a>
import React，{Component}来自“React”；
从“react bootstrap”导入{ListGroupItem}；
从“react bootstrap”导入{FormGroup、FormControl、ControlLabel、Label}；
从“react router bootstrap”导入{LinkContainer}；
从“aws放大”导入{API，存储}；
导入“/RawList.css”；
从'react icons/md'导入{MdMessage}；
导出默认类RawList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
注：[]，
输入值：0，
reducedView：正确
};
}
异步组件didmount（）{
试一试{
const notes=wait this.notes（）；
this.setState（{notes}）；
}捕获（e）{
警报（e）；
}
this.setState（{isLoading:false}）；
}
附注（{
返回API.get（“notes”、“/notes”）；
}
getType（附件）{
如果（附件===未定义）{
返回（“”）；
}
var tmpString=attachment.split（'/'）[0]；
如果（tmpString==“石油和天然气租赁”）{
归还（“石油和天然气租赁”）；
}
否则如果（tmpString==“油气井”）{
返回（“油气井”）；
}
否则，如果（tmpString==“OilMaster”）{
返回（“油主”）；
}
else if（tmpString==“GasMaster”）{
返回（“气体主控”）；
}
否则如果（tmpString==“油井W10”）{
返回（“W10油井”）；
}
否则{
返回（“未知类型”）；
}
}
格式化文件名（值）{
回报（价值）；
}
显示新（日期）{
if（parseInt（（Date.now（）-Date）/3600000）<1）{
返回(
);
}
}
getFilename（str）{
返回（str.split（'\\'）.pop（）.split（'/'）.pop（）.split（'-'）[1]）；
}
handleClick（e）{
this.setState（{reducedView:false}）；
e、 预防默认值（）；
}
getNote（noteID）{
返回API.get（“notes”、`/notes/`+noteID）；
}
异步getDownloadURL（noteId）{
var-attachmentURL；
const note=wait this.getNote（noteId）；
常量{附件}=注释；
如有需要（附件）{
attachmentURL=等待存储.vault.get（附件）；
}
返回（附件URL）；
}
renderNotesList（注释）{
返回[{}].concat（notes）.map(
（注意，i）=>{
如果（i！==0）{
如果（i>=6&¬es.length>=6&&this.state.reducedView）{
如果（i==6）{
返回(
);
}
}
否则{
返回(
{this.getFilename（note.attachment）}
{this.displayNew（note.createdAt）}
{this.humanFileSize（note.input\u fileSize）}
{this.getType（note.attachment）}
{新日期（note.createdAt.toLocaleString（）}
转换
);
}
}
否则{
如果（notes.length==0）{
返回(
文件
大小
类型
日期
评论
+创建新上载
你还没有任何现有的上传。
);
}
否则{
返回(
文件
大小
类型
日期
评论
+创建新上载
);
}
}
}
);
}
humanFileSize（字节）{
var-thresh=1024；
if（数学绝对值（字节）=thresh&&u{
var e=document.getElementById（“DropdownList”）；
var tmp=parseInt（e.options[e.selectedIndex].value）；
如果（tmp==1）{
this.state.notes.sort（函数（a，b）{
返回this.getType（a.attachment）>this.getType（b.attachment）；
}.绑定（本）
}
else if（tmp==2）{
this.state.notes.sort（函数（a，b）{
返回this.getType（a.attachment）async getDownloadURL(noteId){
var attachmentURL;
const note = await this.getNote(noteId);
const {attachment} = note;
if(attachment){
attachmentURL = await Storage.vault.get(attachment);
}
return(attachmentURL);
}
import React, { Component } from "react";
import { ListGroupItem } from "react-bootstrap";
import { FormGroup, FormControl, ControlLabel, Label } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import { API, Storage } from "aws-amplify";
import "./RawList.css";
import { MdMessage } from 'react-icons/md';
export default class RawList extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
notes: [],
inputValue: 0,
reducedView: true
};
}
async componentDidMount() {
try {
const notes = await this.notes();
this.setState({ notes });
} catch (e) {
alert(e);
}
this.setState({ isLoading: false });
}
notes() {
return API.get("notes", "/notes");
}
getType(attachment){
if(attachment === undefined){
return("");
}
var tmpString = attachment.split('/')[0];
if(tmpString === "Oil&GasLease"){
return("Oil & Gas Lease");
}
else if(tmpString === "Oil&GasWell"){
return("Oil & Gas Well");
}
else if(tmpString === "OilMaster"){
return("Oil Master");
}
else if(tmpString === "GasMaster"){
return("Gas Master");
}
else if(tmpString === "OilWellW10"){
return("Oil Well W10");
}
else{
return("Unknown Type");
}
}
formatFilename(value){
return(value);
}
displayNew(date){
if(parseInt((Date.now() - date) / 3600000) < 1){
return(
<img className="LogoNew" src={require("../imgs/new.png")} alt="NotFound"/>
);
}
}
getFilename(str){
return(str.split('\\').pop().split('/').pop().split('-')[1]);
}
handleClick(e) {
this.setState({ reducedView: false });
e.preventDefault();
}
getNote(noteID) {
return API.get("notes", `/notes/`+noteID);
}
async getDownloadURL(noteId){
var attachmentURL;
const note = await this.getNote(noteId);
const {attachment} = note;
if(attachment){
attachmentURL = await Storage.vault.get(attachment);
}
return(attachmentURL);
}
renderNotesList(notes) {
return [{}].concat(notes).map(
(note, i) => {
if(i !== 0){
if(i >= 6 && notes.length >= 6 && this.state.reducedView){
if(i === 6){
return(
<ListGroupItem>
<img onClick={this.handleClick.bind(this)} src={require("../imgs/3dots.png")} alt="NotFound"/>
</ListGroupItem>
);
}
}
else{
return(
<ListGroupItem className="mainContainer">
<div className="column1">
<img className="Logo" src={require("../imgs/ebc.png")} alt="NotFound"/>
</div>
<div className="column2">
<b>{this.getFilename(note.attachment)}</b>
{this.displayNew(note.createdAt)}
</div>
<div className="column3">
{this.humanFileSize(note.input_fileSize)}
</div>
<div className="column4">
{this.getType(note.attachment)}
</div>
<div className="column5">
{new Date(note.createdAt).toLocaleString()}
</div>
<div className="column6">
<a href={'/notes/'+note.noteId}><MdMessage className="commentLogo" size={20}></MdMessage></a>
</div>
<div className="column7">
<span className="convertionAction">
CONVERT
<img className="logoImageLeft" src={require("../imgs/convertion.png")} alt="NotFound"/>
</span>
</div>
<div className="column8">
<a href={this.getDownloadURL(note.noteId)}>
<span className="downloadAction">
DOWNLOAD
<img className="logoImageRight" src={require("../imgs/download.png")} alt="NotFound"/>
</span>
</a>
</div>
<div className="column9">
<div className="tripleDot"></div>
</div>
</ListGroupItem>
);
}
}
else{
if(notes.length === 0){
return(
<div>
<ListGroupItem>
<div className="column2Header">
File
</div>
<div className="column3Header">
Size
</div>
<div className="column4Header">
Type
</div>
<div className="column5Header">
Date
</div>
<div className="column6Header">
Comment
</div>
</ListGroupItem>
<LinkContainer key={note.noteId} to={`/upload`}>
<ListGroupItem className="upload">
<div className="noUpload">
+ Create new upload
</div>
</ListGroupItem>
</LinkContainer>
<div className="errorMessage">
You don't have any existing upload yet.
</div>
</div>
);
}
else{
return(
<div>
<ListGroupItem>
<div className="column2Header">
File
</div>
<div className="column3Header">
Size
</div>
<div className="column4Header">
Type
</div>
<div className="column5Header">
Date
</div>
<div className="column6Header">
Comment
</div>
</ListGroupItem>
<LinkContainer key={note.noteId} to={`/upload`}>
<ListGroupItem className="upload">
<div className="noUpload">
+ Create new upload
</div>
</ListGroupItem>
</LinkContainer>
</div>
);
}
}
}
);
}
humanFileSize(bytes) {
var thresh = 1024;
if(Math.abs(bytes) < thresh) {
return bytes + ' B';
}
var units = ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
var u = -1;
do {
bytes /= thresh;
++u;
} while(Math.abs(bytes) >= thresh && u < units.length - 1);
return bytes.toFixed(1)+''+units[u];
}
handleInputChange = event => {
var e = document.getElementById("DropdownList");
var tmp = parseInt(e.options[e.selectedIndex].value);
if(tmp === 1){
this.state.notes.sort(function(a,b){
return this.getType(a.attachment) > this.getType(b.attachment);
}.bind(this))
}
else if(tmp === 2){
this.state.notes.sort(function(a,b){
return this.getType(a.attachment) < this.getType(b.attachment);
}.bind(this))
}
else if(tmp === 3){
this.state.notes.sort(function(a,b){
return a.attachment < b.attachment;
})
}
else if(tmp === 4){
this.state.notes.sort(function(a,b){
return a.attachment > b.attachment;
})
}
else if(tmp === 5){
this.state.notes.sort(function(a,b){
return a.fileSize < b.fileSize;
})
}
else if(tmp === 6){
this.state.notes.sort(function(a,b){
return a.fileSize > b.fileSize;
})
}
else if(tmp === 7){
this.state.notes.sort(function(a,b){
return a.createdAt > b.createdAt;
})
}
else if(tmp === 8){
this.state.notes.sort(function(a,b){
return a.createdAt < b.createdAt;
})
}
this.setState({ inputValue: tmp });
}
render() {
return (
<div className="Supervision">
<div className="notes">
<FormGroup onChange={this.handleInputChange}>
<ControlLabel>Order By :</ControlLabel><br/>
<select id="DropdownList">
<option value="0">...</option>
<option value="1">Type ascending</option>
<option value="2">Type descending</option>
<option value="3">Filename ascending</option>
<option value="4" >Filename descending</option>
<option value="5">Size ascending</option>
<option value="6" >Size descending</option>
<option value="7">Date ascending</option>
<option value="8">Date descending</option>
</select>
</FormGroup>
{!this.state.isLoading && this.renderNotesList(this.state.notes)}
</div>
</div>
);
}
}
function App() {
const [url, setUrl] = React.useState('')
React.useEffect(() => {
getDownloadURL().then(setUrl)
}, [])
async function getDownloadURL(){
return await Promise.resolve('foo')
}
return (
<a href={url}>
<span className="downloadAction">
DOWNLOAD
</span>
</a>
);
}
class DownloadLink extends React.Component {
state = { url: "" };
componentDidMount() {
const { noteId } = this.props;
this.getDownloadURL(noteId).then(url => this.setState({ url }));
}
getDownloadURL = async function(noteId) {
// for example
return await Promise.resolve(`foo/${noteId}`);
};
render() {
return (
<a href={this.state.url}>
<span className="downloadAction">DOWNLOAD</span>
</a>
);
}
}
<div className="column8">
<a href={this.getDownloadURL(note.noteId)}>
<span className="downloadAction">
DOWNLOAD
<img className="logoImageRight" src={require("../imgs/download.png")} alt="NotFound"/>
</span>
</a>
</div>
<div className="column8">
<DownloadLink noteId={note.noteId} />
</div>