时间戳

首页 > 解决方案 > 在数组列表中取一个值

reactjs - 在数组列表中取一个值

问题描述

每个人我在我的应用程序中都有一个问题要解决我需要在我的数组中取一个特定的值并将他放入我的表中以向用户显示这个值。请参阅下面的代码：

我的模拟数据

{
      "Data": "2020-09-21",
      "Horario":"09:00:00",
      "Segunda": [
        {
          "Periodo": "1",
          "HorarioInicio": "9:00:00",
          "HorarioTermino": "10:50:00",
          "IdDisciplina": "396",
          "DescricaoDisciplina": "Arte (Artes Visuais)",
          "DescricaoReduzidaDisciplina": "Arte Vi.",
          "DescricaoTurno": "Manhã",
          "IdEstabelecimento": "43",
          "DescricaoEstabelecimento": "Colégio Correio Lima",
          "TipoSituacaoHorario": "Normal"
        },
}

我需要访问我的数组 Segunda 中的值

我的界面

interface ISegunda {
  Periodo: string;
  HorarioInicio: string;
  HorarioTermino: string;
  IdDisciplina: string;
  DescricaoDisciplina: string;
  DescricaoReduzidaDisciplina: string;
  DescricaoTurno: string;
  IdEstabelecimento: string;
  DescricaoEstabelecimento: string;
  TipoSituacaoHorario: string;
}

export interface IAgendaAulas {
  Data: string;
  Horario: string;
  Segunda: ISegunda[];
}

我的服务

const getAgendaAulas = async (
  dataAula: string
): Promise<IAgendaAulas[] | undefined> => {
  try {
    const { data } = await Api().get<IAgendaAulas[]>(
      `/agenda-aulas?DataAula=${dataAula}`
    );
    if (data) {
      return data;
    } else {
      return undefined;
    }
  } catch (error) {
    return undefined;
  }
};

她是我的 tsx 视图

interface IAgendasAulasProps {
  agendaDeAulas: IAgendaAulas[];
  dataAtualizada: string;
}

export const TabelaHorariosAulas: React.FC<IAgendasAulasProps> = ({
  agendaDeAulas,
  dataAtualizada,
}) => {
  const [aulas, setAulas] = useState<IAgendaAulas[]>();
  
  useEffect(() => {
    setIsLoading(true);
    AgendaTurmaService.getAgendaAulas(dataAtualizada).then((data) => {
      setIsLoading(false);
      if (data) {
        setAulas(data);
      } else {
        setAulas([])
      }
    });
  }, [dataAtualizada]);

return (
<Grid container>
        <Grid item sm={12}>
          <TableContainer component={Paper}>
            <Table stickyHeader>
              <TableHead>
                <TableRow>
                  <TableCell>Horário</TableCell>
                  <TableCell>Segunda</TableCell>                  
                </TableRow>
              </TableHead>

              <TableBody>
                {aulas?.map((horario, indexAulas) => (
                  <>
                    <TableRow>
                      <TableCell>{}</TableCell>
                      <TableCell>{}</TableCell>                      
                    </TableRow>
                  </>
                ))}
              </TableBody>
             </Table>
            </TableContainer>
           </Grid>
          </Grid>

我希望有人可以帮助我解决我的问题

标签： reactjstypescriptmaterial-ui

解决方案

您可以像这样使用数组解构：

  const { Segunda } = aulas;

  Segunda.map((i) => i.HorarioInicio, i.HorarioInicio......;

您也可以将其重命名为 Segunda：

  const { Segunda: items } = aulas;

  items.map((i) => i.HorarioInicio, i.HorarioInicio......;

编辑您自己的代码将是这样的：

它应该工作


interface IAgendasAulasProps {
  agendaDeAulas: IAgendaAulas[];
  dataAtualizada: string;
}

export const TabelaHorariosAulas: React.FC<IAgendasAulasProps> = ({
  agendaDeAulas,
  dataAtualizada,
}) => {
  const [aulas, setAulas] = useState<IAgendaAulas[]>();
  
  useEffect(() => {
    setIsLoading(true);
    AgendaTurmaService.getAgendaAulas(dataAtualizada).then((data) => {
      setIsLoading(false);
      if (data) {
        setAulas(data);
      } else {
        setAulas([])
      }
    });
  }, [dataAtualizada]);


const { Segunda: items } = aulas;

return (
<Grid container>
        <Grid item sm={12}>
          <TableContainer component={Paper}>
            <Table stickyHeader>
              <TableHead>
                <TableRow>
                  <TableCell>Horário</TableCell>
                  <TableCell>Segunda</TableCell>                  
                </TableRow>
              </TableHead>

              <TableBody>
                {items.map(({horario, indexAulas}) => (
                  <>
                    <TableRow>
                      <TableCell>{horario}</TableCell>
                      <TableCell>{indexAulas}</TableCell>                      
                    </TableRow>
                  </>
                ))}
              </TableBody>
             </Table>
            </TableContainer>
           </Grid>
          </Grid>

推荐阅读