无法在 JSX 的 return 组件中看到任何内容

Question

我是 React 和 JSX 的新手。我正在构建一个按钮，单击它会打开一个对话框，里面有一个 table (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>
    </>
  );

如果有人能帮我解决这个问题，那就太棒了。谢谢

Answer 1

您不能在 onClick 函数中使用 return 方法。您可能需要维护一个单独的状态来处理 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);
}

无法在 JSX 的 return 组件中看到任何内容

Not able to see anything written inside the return component in JSX

javascript

jsx

reactjs

next.js