Передача данных?

Question

[Yulya]

Помогите передать данные в другой компонент

<Typography variant='body1' component='p' sx={{ fontSize: 'lg', fontWeight: 'medium', mt: 6 }}>
            Вид порушення:
          </Typography>
          {act.violation_type.violation_description ? (
            <Typography variant='body1' component='p' sx={{ fontSize: 'lg', fontWeight: 'light' }}>
              {act.violation_type.violation_description} {' '} {act.violation_type.violation_name}
            </Typography>) : (<Typography variant='h1' component='h1' sx={{ color: 'red.500', mt: 5 }}>
            Відсутня інформація про вид порушення.
          </Typography>)}

выдает такую ошибку

Comments

[VoidVolker]

Yulya Правила 3.8 - в т.ч. логи.

Answer 1

[Alexandroppolus]

у тебя act.violation_type равен undefined.
такие дела.

Comments

[Yulya]

я понимаю, но как его передать что он не был undefined?

[Alexandroppolus]

Yulya, в объекте act нет поля violation_type

что это за объект? откуда взялся?

[Yulya]

function createData(
  id,
  actNumber,
  regDate,
  violationType,
  actionState,
  counterSize,
  regionCity,
  department,
  unit,
  contractorType,
  consumerStatus
) {
  return {
    id,
    actNumber,
    regDate,
    violationType,
    actionState,
    counterSize,
    regionCity,
    department,
    unit,
    contractorType,
    consumerStatus,
  };
}

export default function ActsPage() {

  const classes = useStyles();
  const [userData, setUserData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [currentPage, setCurrentPage] = useState(1);
  const [perPage, setPerPage] = useState(15);
  const [searchQuery, setSearchQuery] = useState('');
  const [pageQty, setpageQty] = useState(0);
  const [query, setQuery] = useState('');

  const navigate = useNavigate();
  

  useEffect(() => {
  const fetchData = async (page) => {
    const token = "284|jO1hwCex1S5qeWZV1guAXdIOXLYwACCFI0wYyLez";
    const config = {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };

    try {
      axios.get(BASE_URL + `&page=${page}`, config).then(
        ({data}) =>{ 
          console.log(data)
          setUserData(data.data) //указываем место где лежат акты 
          setPerPage(data.per_page);
          setIsLoading(false);
          setpageQty(data.current_page && data.last_page) //количество страниц 
       
        }
      )

    } catch (error) {
      console.error('Ошибка загрузки данных:', error);
      setIsLoading(false);
    }
  };
  fetchData(currentPage);
  }, [currentPage, query]);

  const row = query.data && query.data.map((act) => createData(act.id, act.act_number, act.reg_date, act.violation_type.violation_description + ' ' + act.violation_type.violation_name, act.action_state.state, act.counter_size.counter_size, act.region.region_name + ' , ' + act.city.city_name, act.department.department_name, act.unit.unit_name, act.contractor_type.contractor_type_name, act.is_consumer === 1 ? 'Споживач' : 'Не споживач'))
  const filteredRows = userData.filter((act) => act.act_number.toLowerCase().includes(searchQuery.toLowerCase()));

  const handlePageChange = (page) => {
    setCurrentPage(page);
    
  };

  
  // eslint-disable-next-line no-unused-vars
  const [activeTab, setActiveTab] = useState(0)
  const handleTabClick = (tabIndex) => {
    setActiveTab(tabIndex);
    navigate('/dashboard/newact'); 
  }

  return (

    <ThemeProvider theme={defaultTheme}>
       
      <Container maxWidth="xl" sx={{ mt: 4, mb: 4, opacity:1}}>
        <Grid container spacing={3}>
          <Grid item xs={12} md={8} lg={12}>
            <Paper
              sx={{
                p: 2,
                display: 'flex',
                flexDirection: 'column',
                }}>
            <Grid item xs={12} md={8} lg={12}>
              <Typography
                component="h2"
                variant="h6"
                color="primary"
                gutterBottom
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    }}> Журнал актів порушень
              </Typography>
              <Stack direction="row" spacing={0} sx={{ pb: 5, display: 'flex', justifyContent: 'space-between' }}>
                 <Button sx={{ display: 'flex', alignItems: 'center' }}
                    onClick={() => handleTabClick(0)} to='/dashboard/newact'
                    variant="contained" 
                    endIcon={<AddIcon/>}>
                      Створити новий акт
                   </Button>
                  <input
                    type="text"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="Пошук актів"
                      sx={{
                        padding: '10px', 
                        borderRadius: '4px', 
                        border: '1px solid #ccc', 
                        width: '100%', 
                        }}/>
              </Stack>
              
              <TableContainer component={Paper} className={classes.tableContainer}>
                {isLoading ? (
                  <CircularProgress />
                ) : (
                <>
                  <Table>
                    <TableHead>
                      <TableRow>
                      <TableCell className={classes.tableCell}>ID</TableCell>
                        <TableCell className={classes.tableCell}>№ Акту порушень</TableCell>
                        <TableCell className={classes.tableCell}>Дата та час реєстрації та виявлення порушення</TableCell>
                        <TableCell className={classes.tableCell}>Відділення/дільниця</TableCell>
                        <TableCell className={classes.tableCell}>Адреса порушення</TableCell>
                        <TableCell className={classes.tableCell}>Вид контрагента</TableCell>
                        <TableCell className={classes.tableCell}>Прізвище та ініціали споживача або назва оридичної особи</TableCell>
                        <TableCell className={classes.tableCell}>ПІБ, посада пред-ка, органу м. самоврядування який присутній на місці виявленого порушення</TableCell>
                        <TableCell className={classes.tableCell}>Особистий рахунок</TableCell>
                        <TableCell className={classes.tableCell}>Структурний пвдрозділ, який виявив порушення</TableCell>
                        <TableCell className={classes.tableCell}>ПІБ представника АТ,який виявив порушення</TableCell>
                        <TableCell className={classes.tableCell}>Вид порушення</TableCell>
                        <TableCell className={classes.tableCell}>Стан дії по порушенню</TableCell>
                      </TableRow>
                    </TableHead>
                  <TableBody>
                {filteredRows.map((row) => (
                  
                  <TableRow key={row.id}>
                   
                     <TableCell style={{ width: 160 }} component="th" scope="row">
                      <Link to={`/dashboard/act/${row.id}`}>{row.id}</Link>
                    </TableCell>
                    <TableCell className={classes.tableCell}>{row.act_number}</TableCell>
                    <TableCell className={classes.tableCell}>{row.reg_date}</TableCell>
                    <TableCell className={classes.tableCell}>{row.department.department_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.street.street_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.contractor_type.contractor_type_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.fiz_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.unit.unit_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.personal_account}</TableCell>
                    <TableCell className={classes.tableCell}>{row.region.region_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.unit.unit_name}</TableCell>
                    <TableCell className={classes.tableCell}>{row.violation_type.violation_description}</TableCell>
                    <TableCell className={classes.tableCell}>{row.action_state.state}</TableCell>
                  </TableRow>

[Aetae]

Yulya, ещё раз, его просто там нет, открывайте вкладку Network(Сеть) в инструментах разработчика и смотрите, что у вас там в ответе запроса прилетает на самом деле.

Если вам в принципе пофиг, что violation_type отсутствует в act, то можно условие написать так: {act.violation_type?.violation_description ? (.