在JSX的回傳組件中看不到任何內容

我是 React 和 JSX 的新手。單擊時我正在構建一個按鈕打開一個對話框，其中包含一個表（1x3），其中名稱、狀態和例外錯誤為“字串”。

出于某種原因，當我單擊按鈕時，我可以看到控制臺中的 console.log() 陳述句正在顯示，但沒有任何內容顯示為彈出對話框（因此，return() 陳述句中的任何內容） .

  const isFailed = () => {
    console.log(testCase["test-method"][0].status);
        //alert(testCase["test-method"][0].exception);
        return(
          <Dialog maxWidth="xl" open={open} onClose={() => setOpen(false)}>
          <DialogTitle>{testCase.name} Summary</DialogTitle>
          <DialogContent>
            <Table>
              {steps.map((val) => (
                <TableRow key={val.name}>
                  <TableCell>{val.name}</TableCell>
                  <TableCell>{val.status}</TableCell>
                  <TableCell>{val.exception}</TableCell>
                </TableRow>
              ))}
            </Table>
          </DialogContent>
        </Dialog>
        );
  }

編輯： isFailed 函式由 onClick 按鈕處理程式呼叫

const steps = testCase["test-method"];
  return (
    <>
      <TableRow key={key} style={{ cursor: "pointer" }} onClick={() => setOpen(true)}>
        <TableCell>{testCase.name}</TableCell>
        <TableCell>{testCase.duration}</TableCell>
        <StatusCell fail={testCase.fail} skip={testCase.skip} />
        <TableCell>{(typeof(testCase["test-method"][0].exception) == typeof("string")) ? <div> <Button onClick = {isFailed} color = "primary">View Error</Button> </div>: null}</TableCell>
      </TableRow>
    </>
  );

如果有人可以幫助我，那將是很棒的。謝謝。

uj5u.com熱心網友回復：

您不能在 onClick 函式中使用回傳方法。您可能需要維護一個單獨的狀態來處理 onclick 函式。

const steps = testCase["test-method"];
    return (
        <>
           <TableRow key={key} style={{ cursor: "pointer" }} onClick={() 
        => setOpen(true)}>
             <TableCell>{testCase.name}</TableCell>
             <TableCell>{testCase.duration}</TableCell>
             <StatusCell fail={testCase.fail} skip={testCase.skip} />
             <TableCell>{(typeof(testCase["test-method"][0].exception) == typeof("string")) ? <div> <Button onClick = {isFailed} color = "primary">View Error</Button> </div>: null}</TableCell>
             </TableRow>
         </>
        {isClicked &&
         <Dialog maxWidth="xl" open={open} onClose={() => setOpen(false)}>
            <DialogTitle>{testCase.name} Summary</DialogTitle>
               <DialogContent>
                 <Table>
                     {steps.map((val) => (
                        <TableRow key={val.name}>
                           <TableCell>{val.name}</TableCell>
                            <TableCell>{val.status}</TableCell>
                            <TableCell>{val.exception}</TableCell>
                        </TableRow>
                     ))}
                 </Table>
              </DialogContent>
         </Dialog>
        }
      
     );

在 onClick 函式上只需設定isClicked函式的布林值。

const [isClicked, setIsClicked] = React.useState(false);

const isFailed = () => {
    setIsClicked(true);
}

標籤：javascript 反应 下一个.js jsx

上一篇：在單個物件javascript中減去相同的變數

下一篇：Javasript通過從陣列值中僅選擇真值來更改值