Невозможно увидеть что-либо, написанное внутри возвращаемого компонента в 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>
</>
);
Если кто-то может помочь мне с этим, это будет здорово. Спасибо.
@farooq добавил код
return не будет работать с функцией onclick. Возможно, вам потребуется установить состояние и добавить отдельную функцию для возврата. Если вам нужна дополнительная помощь, я окажу ее,
Используйте обработчик кликов, чтобы установить некоторое значение состояния, и используйте условный рендеринг, чтобы показать или скрыть диалоговое окно в зависимости от значения состояния.
Ответы 1
Вы не можете использовать метод возврата внутри функции 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);
}
Спасибо за ответ. Можете ли вы уточнить, как установить логическое значение функции isClicked и где его установить?
Я добавил функции useState и isFailed отдельно под своим ответом. Но в вашем коде вам нужно добавить его поверх вашего функционального компонента.
Нужен дополнительный код для просмотра точной проблемы. Я имею в виду, что мне нужно увидеть, где вызывается функция isFailed().