Reactjs 包括对应日期的表格记录_Reactjs_Typescript_Material Ui

Reactjs 包括对应日期的表格记录

reactjs typescript material-ui

Reactjs 包括对应日期的表格记录,reactjs,typescript,material-ui,Reactjs,Typescript,Material Ui,我需要帮助在我的表视图中放置类的记录，但我现在不知道如何才能做到这一点我需要做这个（这是一个用户体验原型——一周中的几天都是葡萄牙语：horario=时间，segunda=星期一，terça=星期二，quarta=星期三，quinta=星期四，sexta=星期五）我需要取一个日期的值，检查是否是星期一、星期二或任何一个星期天，并将其放入当前列iqual UX prototype中，但我现在不知道a如何做到这一点下面是我的代码她是我的模拟数据 "agenda-aulas"

我需要帮助在我的表视图中放置类的记录，但我现在不知道如何才能做到这一点

我需要做这个（这是一个用户体验原型——一周中的几天都是葡萄牙语：horario=时间，segunda=星期一，terça=星期二，quarta=星期三，quinta=星期四，sexta=星期五）

我需要取一个日期的值，检查是否是星期一、星期二或任何一个星期天，并将其放入当前列iqual UX prototype中，但我现在不知道a如何做到这一点

下面是我的代码

她是我的模拟数据

"agenda-aulas":[
    {
      "Data": "2020-09-21",
      "Horarios": [
          {
              "Periodo": "1",
              "HorarioInicio": "2020-09-21T07:30:00-0300",
              "HorarioTermino": "2020-09-21T08:20:00-0300",
              "IdDisciplina": "396",
              "DescricaoDisciplina": "Arte (Artes Visuais)",
              "DescricaoReduzidaDisciplina": "Arte Vi.",
              "DescricaoTurno": "Manhã",
              "IdEstabelecimento": "43",
              "DescricaoEstabelecimento": "Colégio Correio Lima",
              "TipoSituacaoHorario": "Normal"
          }
      ]
  },
  {
      "Data": "2020-09-22",
      "Horarios": [
          {
              "Periodo": "3",
              "HorarioInicio": "2020-09-22T09:10:00-0300",
              "HorarioTermino": "2020-09-22T10:00:00-0300",
              "IdDisciplina": "3",
              "DescricaoDisciplina": "História",
              "DescricaoReduzidaDisciplina": "Hist",
              "DescricaoTurno": "Manhã",
              "IdEstabelecimento": "43",
              "DescricaoEstabelecimento": "Colégio Correio Lima",
              "TipoSituacaoHorario": "Normal"
          }
      ]
  },

我的界面

interface IHorarios {
  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;
  Horarios: IHorarios[];
}

我的服务

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

我的常数和使用效果与表格

export const TabelaHorariosAulas: React.FC<IAgendasAulasProps> = ({
  agendaDeAulas,
  dataAtualizada,
}) => {
const [aula, setAula] = useState<IAgendaAulas>();

useEffect(() => {
    setIsLoading(true);
    AgendaTurmaService.getAgendaAulas(dataAtualizada).then((data) => {
      setIsLoading(false);
      if (data) {
        setAula(data);
      } else {
        setAula({Data:"", Horarios:[]});
      }
    });
  }, [dataAtualizada]);

<Grid container>
        <Grid item sm={12}>
          <TableContainer component={Paper}>
            <Table stickyHeader>
              <TableHead>
                <TableRow>
                  <TableCell>Horário</TableCell>
                  <TableCell>Segunda</TableCell>
                  <TableCell>Terça</TableCell>
                  <TableCell>Quarta</TableCell>
                  <TableCell>Quinta</TableCell>
                  <TableCell>Sexta</TableCell>
                </TableRow>
              </TableHead>

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

export const TabelaHorariosAulas:React.FC=({
阿根达多拉斯，
dataAtualizada，
}) => {
const[aula，setAula]=useState（）；
useffect（（）=>{
设置加载（真）；
AgendaTurmaService.getAgendaAulas（dataAtualizada）。然后（（data）=>{
设置加载（假）；
如果（数据）{
setAula（数据）；
}否则{
setAula（{数据：，Horarios:[]}）；
}
});
}，[dataAtualizada]）；
霍拉里奥
塞贡达
特里萨
夸塔
昆塔
塞克斯塔
{aula？.Horarios.map（（horario，indexAulas）=>(
))}
}

这是我的解决方案，我非常确定

horario.Periodo

代表一周中的某一天，我不明白第一列中的值代表什么，我只是把

horario.HorarioInicio

放在这里

桌子

从“react”导入{FunctionComponent}；
类型DayStablerRowProps={
索引：数字，
霍拉里奥：地图，
}
const DaysTableRow:FunctionComponent=（{horario，indexAulas}）=>{
const time=horario.get（“HorarioInicio”）；
const day=horario.get（“Periodo”）；
const data=horario.get（“descripa”）；
返回(
{time}
{day==“1”？数据：“-”}
{day==“2”？数据：“-”}
{day==“3”？数据：“-”}
{day==“4”？数据：“-”}
{day==“5”？数据：“-”}
);
};
export const TabelaHorariosAulas:React.FC=({
阿根达多拉斯，
dataAtualizada，
}) => {
const[aula，setAula]=useState（）；
useffect（（）=>{
设置加载（真）；
AgendaTurmaService.getAgendaAulas（dataAtualizada）。然后（（data）=>{
设置加载（假）；
如果（数据）{
setAula（数据）；
}否则{
setAula（{数据：，Horarios:[]}）；
}
});
}，[dataAtualizada]）；
霍拉里奥
塞贡达
特里萨
夸塔
昆塔
塞克斯塔
{aula？.Horarios.map（（horario:map，indexAulas:number）=>(
))}
;
};

快乐的黑客！嘿，谢谢你的回答，这部分代码中还有一件事

constdiastablerow=（{horario，indexAulas}）

告诉我这个错误绑定元素'horario'隐式地有一个'any'类型。a如何解决这个问题？a try put

const DiasTableRow=（{horario:string，indexAulas:number}）

但不起作用horario是Map，我刚刚更新了答案以包含它。感谢您的帮助和时间，但在这部分代码中，{aula？.Horarios.Map（（horario:Map，indexAulas:number）=>（））我遇到了这个问题，我尝试了很多方法，但我不知道如何解决类型为“（horario:Map，indexAulas:number）=>JSX的参数。元素”不可分配给类型为“（value:IHorarios，index:number，array:IHorarios[]）=>Element”的参数。参数“horario”和“value”的类型不兼容。类型“IHorarios”缺少类型“Map”中的以下属性：clear、delete、forEach、get和其他8个属性。如果我看到了整个代码（不仅仅是部分代码），也许我可以理解更多，但我相信您现在已经清楚了逻辑。

export const TabelaHorariosAulas: React.FC<IAgendasAulasProps> = ({
  agendaDeAulas,
  dataAtualizada,
}) => {
const [aula, setAula] = useState<IAgendaAulas>();

useEffect(() => {
    setIsLoading(true);
    AgendaTurmaService.getAgendaAulas(dataAtualizada).then((data) => {
      setIsLoading(false);
      if (data) {
        setAula(data);
      } else {
        setAula({Data:"", Horarios:[]});
      }
    });
  }, [dataAtualizada]);

<Grid container>
        <Grid item sm={12}>
          <TableContainer component={Paper}>
            <Table stickyHeader>
              <TableHead>
                <TableRow>
                  <TableCell>Horário</TableCell>
                  <TableCell>Segunda</TableCell>
                  <TableCell>Terça</TableCell>
                  <TableCell>Quarta</TableCell>
                  <TableCell>Quinta</TableCell>
                  <TableCell>Sexta</TableCell>
                </TableRow>
              </TableHead>

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

import { FunctionComponent } from "react";

type DaysTableRowProps = {
    indexAulas: number,
    horario: Map<string, string>,
}

const DaysTableRow: FunctionComponent<DaysTableRowProps> = ({ horario, indexAulas }) => {
  const time = horario.get("HorarioInicio");
  const day = horario.get("Periodo");
  const data = horario.get("DescricaoDisciplina"); 
  return (
    <TableRow key={indexAulas}>
      <TableCell>{time}</TableCell>
      <TableCell>{day === "1" ? data : "-"}</TableCell>
      <TableCell>{day === "2" ? data : "-"}</TableCell>
      <TableCell>{day === "3" ? data : "-"}</TableCell>
      <TableCell>{day === "4" ? data : "-"}</TableCell>
      <TableCell>{day === "5" ? data : "-"}</TableCell>
    </TableRow>
  );
};


export const TabelaHorariosAulas: React.FC<IAgendasAulasProps> = ({
  agendaDeAulas,
  dataAtualizada,
}) => {
  const [aula, setAula] = useState<IAgendaAulas>();
  
  useEffect(() => {
    setIsLoading(true);
    AgendaTurmaService.getAgendaAulas(dataAtualizada).then((data) => {
      setIsLoading(false);
      if (data) {
        setAula(data);
      } else {
        setAula({Data:"", Horarios:[]});
      }
    });
  }, [dataAtualizada]);
  
  <Grid container>
    <Grid item sm={12}>
      <TableContainer component={Paper}>
        <Table stickyHeader>
          <TableHead>
            <TableRow>
              <TableCell>Horário</TableCell>
              <TableCell>Segunda</TableCell>
              <TableCell>Terça</TableCell>
              <TableCell>Quarta</TableCell>
              <TableCell>Quinta</TableCell>
              <TableCell>Sexta</TableCell>
            </TableRow>
          </TableHead>
  
          <TableBody>
            {aula?.Horarios.map((horario: Map<string, string>, indexAulas: number) => (
              <DaysTableRow horario={horario} indexAulas={indexAulas} />
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Grid>
  </Grid>;
};