获取反应组件的未定义值 |节点js |反应

Posted 2023-02-22

【中文标题】获取反应组件的未定义值 |节点js |反应

【英文标题】：Getting undefined value for react component | Node js | React

【发布时间】：2021-08-18 23:11:00

【问题描述】：

在下面的代码中，当用户单击“复制到剪贴板”按钮时，我得到了未定义的值。这意味着我正在为el.value 获得未定义的值。我在开发人员工具中看到了响应，它在那里显示了预期的响应。

index.ts

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

)

剪贴板.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>
    )

        .....

Home.jsx

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

当我调试代码时，一旦 fetch 函数控制完成执行返回到 clipBoard (*) 行并分配 undefined 值。然后再次回到 Home.jsx (**) 行。我想这个是问题

如果我这样做（下面的代码），如果我直接返回值，它工作正常，el.value 分配了预期值。这里我用return 替换了fetch()

getBuildAwsUrl(fileName)
        return "http://s3.backetname.aws/"+fileName

但我不想这样，它应该从http://localhost:8000/getUrl?fileName=value获取

请帮助我...提前致谢

【参考方案1】：

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

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

【讨论】：

``` 导出默认函数 CopyToClipboard(props) const [openNewUpdate, setOpenNewUpdate] = React.useState(false); ......```我是这样定义的

这里 getBuildAwsUrl() 函数正确地从 api 获取值，但在执行 (**) 行控制之前转到函数调用 (*) 行的位置，但这里它没有返回任何值。它假设未定义的值，然后回到 getBuildAwsUrl() 函数定义，然后它执行 (**) 行，现在它返回值但没有用，因为控制已经在 (*) 行下方

【参考方案2】：

我得到了解决方案。通过将方法设为async 方法。但我不知道以下方法是否最好。

Home.jsx

 const getBuildAwsUrl=async(fileName)=>

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

剪贴板.jsx

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