Невозможно увидеть что-либо, написанное внутри возвращаемого компонента в 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>
    </>
  );

Если кто-то может помочь мне с этим, это будет здорово. Спасибо.

Нужен дополнительный код для просмотра точной проблемы. Я имею в виду, что мне нужно увидеть, где вызывается функция isFailed().

farooq 17.05.2022 07:27

@farooq добавил код

not.manaan 17.05.2022 07:32

return не будет работать с функцией onclick. Возможно, вам потребуется установить состояние и добавить отдельную функцию для возврата. Если вам нужна дополнительная помощь, я окажу ее,

farooq 17.05.2022 07:35

Используйте обработчик кликов, чтобы установить некоторое значение состояния, и используйте условный рендеринг, чтобы показать или скрыть диалоговое окно в зависимости от значения состояния.

Phil 17.05.2022 07:37
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
4
41
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 и где его установить?

not.manaan 17.05.2022 08:22

Я добавил функции useState и isFailed отдельно под своим ответом. Но в вашем коде вам нужно добавить его поверх вашего функционального компонента.

farooq 17.05.2022 08:26

Другие вопросы по теме