Javascript 获取react组件|节点js | react的未定义值

在下面的代码中，当用户单击“复制到剪贴板”按钮时，我得到了未定义的值。这意味着我正在为

el.value

获取未定义的值。我在开发人员工具中看到了响应，它在那里显示了预期的响应

index.ts

app.get("/getUrl",async(req,res)=>{
  
  res.send("http://s3.backetname.aws/"+req.query.fileName)
}
)

ClipBoard.jsx

import React from "react";

//Material UI Modules
import IconButton from "@material-ui/core/IconButton";
import Tooltip from '@material-ui/core/Tooltip';
import LinkIcon from '@material-ui/icons/Link';
//Custom Modules
import PopUpMessageSnackbar from "./PopUpMessageSnackbar";


export default function CopyToClipboard(props) {
    const [openNewUpdate, setOpenNewUpdate] = React.useState(false);
    

    

    const copyLinkToClipboard = () => {
        
        const el = document.createElement('textarea');
        
        el.value = props.getBuildAwsUrl(props.fileName)                  (*)
        
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        setOpenNewUpdate(true);
    }

    const hidePopUpMessageSnackbar = () => {

        setOpenNewUpdate(false);
    }
    return (
        <div>
            <Tooltip title="Copy Link">

                <IconButton
                    aria-label="Copy"
                    onClick={() => {
                        gtag('event', 'copylinkclicked', {
                            'event_category': 'linkclicked'
                          });
                        copyLinkToClipboard()
                    }}
                >
                    <LinkIcon />
                </IconButton>
            </Tooltip>

            <PopUpMessageSnackbar
                show={openNewUpdate}
                message="Link Copied"
                hideNewUpdate={() => hidePopUpMessageSnackbar()} />
        </div>
    )
}
        .....
}

getBuildAwsUrl(fileName){
        fetch(
           "http://localhost:8000/getUrl?fileName="+fileName
        )
        .then(res => res.text()) (**)
        .then(text => {
            return text
        });
        



<CopyToClipboard
          
          fileName = {props.data.fileName}         
          getBuildAwsUrl={(fileName)=>this.getBuildAwsUrl(fileName)}
        />

 const getBuildAwsUrl=async(fileName)=>{

   let promise= await fetch("http://localhost:8000/getUrl?fileName="+fileName).then(response=>response.text())
   return promise;
   
  }

 const copyLinkToClipboard = async() => {
        
        const el = document.createElement('textarea');
        
        el.value = await props.getBuildAwsUrl(props.fileName)                  (*)
        
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        setOpenNewUpdate(true);
    }

但是我不想这样，它应该从

http://localhost:8000/getUrl?fileName=value

---

请帮帮我…提前谢谢

道具在哪里定义？我没有看到任何地方定义了道具。 我不知道这是否能解决问题，但试试这个

const copyLinkToClipboard = (props) => {
        
        const el = document.createElement('textarea');
   
        el.value = props.getBuildAwsUrl(props.fileName) (*) here I am getting undefined value
        .....
}```

---

我找到了解决办法。通过将方法设置为

async

方法。但我不知道下面的方法是不是最好的

Home.jsx

import React from "react";

//Material UI Modules
import IconButton from "@material-ui/core/IconButton";
import Tooltip from '@material-ui/core/Tooltip';
import LinkIcon from '@material-ui/icons/Link';
//Custom Modules
import PopUpMessageSnackbar from "./PopUpMessageSnackbar";


export default function CopyToClipboard(props) {
    const [openNewUpdate, setOpenNewUpdate] = React.useState(false);
    

    

    const copyLinkToClipboard = () => {
        
        const el = document.createElement('textarea');
        
        el.value = props.getBuildAwsUrl(props.fileName)                  (*)
        
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        setOpenNewUpdate(true);
    }

    const hidePopUpMessageSnackbar = () => {

        setOpenNewUpdate(false);
    }
    return (
        <div>
            <Tooltip title="Copy Link">

                <IconButton
                    aria-label="Copy"
                    onClick={() => {
                        gtag('event', 'copylinkclicked', {
                            'event_category': 'linkclicked'
                          });
                        copyLinkToClipboard()
                    }}
                >
                    <LinkIcon />
                </IconButton>
            </Tooltip>

            <PopUpMessageSnackbar
                show={openNewUpdate}
                message="Link Copied"
                hideNewUpdate={() => hidePopUpMessageSnackbar()} />
        </div>
    )
}
        .....
}

getBuildAwsUrl(fileName){
        fetch(
           "http://localhost:8000/getUrl?fileName="+fileName
        )
        .then(res => res.text()) (**)
        .then(text => {
            return text
        });
        



<CopyToClipboard
          
          fileName = {props.data.fileName}         
          getBuildAwsUrl={(fileName)=>this.getBuildAwsUrl(fileName)}
        />

 const getBuildAwsUrl=async(fileName)=>{

   let promise= await fetch("http://localhost:8000/getUrl?fileName="+fileName).then(response=>response.text())
   return promise;
   
  }

 const copyLinkToClipboard = async() => {
        
        const el = document.createElement('textarea');
        
        el.value = await props.getBuildAwsUrl(props.fileName)                  (*)
        
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        setOpenNewUpdate(true);
    }

Clipboard.jsx

import React from "react";

//Material UI Modules
import IconButton from "@material-ui/core/IconButton";
import Tooltip from '@material-ui/core/Tooltip';
import LinkIcon from '@material-ui/icons/Link';
//Custom Modules
import PopUpMessageSnackbar from "./PopUpMessageSnackbar";


export default function CopyToClipboard(props) {
    const [openNewUpdate, setOpenNewUpdate] = React.useState(false);
    

    

    const copyLinkToClipboard = () => {
        
        const el = document.createElement('textarea');
        
        el.value = props.getBuildAwsUrl(props.fileName)                  (*)
        
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        setOpenNewUpdate(true);
    }

    const hidePopUpMessageSnackbar = () => {

        setOpenNewUpdate(false);
    }
    return (
        <div>
            <Tooltip title="Copy Link">

                <IconButton
                    aria-label="Copy"
                    onClick={() => {
                        gtag('event', 'copylinkclicked', {
                            'event_category': 'linkclicked'
                          });
                        copyLinkToClipboard()
                    }}
                >
                    <LinkIcon />
                </IconButton>
            </Tooltip>

            <PopUpMessageSnackbar
                show={openNewUpdate}
                message="Link Copied"
                hideNewUpdate={() => hidePopUpMessageSnackbar()} />
        </div>
    )
}
        .....
}

getBuildAwsUrl(fileName){
        fetch(
           "http://localhost:8000/getUrl?fileName="+fileName
        )
        .then(res => res.text()) (**)
        .then(text => {
            return text
        });
        



<CopyToClipboard
          
          fileName = {props.data.fileName}         
          getBuildAwsUrl={(fileName)=>this.getBuildAwsUrl(fileName)}
        />

 const getBuildAwsUrl=async(fileName)=>{

   let promise= await fetch("http://localhost:8000/getUrl?fileName="+fileName).then(response=>response.text())
   return promise;
   
  }

 const copyLinkToClipboard = async() => {
        
        const el = document.createElement('textarea');
        
        el.value = await props.getBuildAwsUrl(props.fileName)                  (*)
        
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        setOpenNewUpdate(true);
    }

---

```导出默认函数CopyToClipboard（props）{const[openNewUpdate，setOpenNewUpdate]=React.useState（false）；…```我这样定义的，你能给我看完整的代码吗？更新的问题这里getBuildAwsUrl（）函数正确地从api获取值，但在执行（**）之前，行控制转到函数调用（*）的位置行，但这里它不返回任何值。它对未定义的值进行赋值，然后返回getBuildAwsUrl（）函数定义，然后执行（**）行，现在它返回值，但没有任何用处，因为控件已位于（*）行的下方