Блог

Здравствуйте, я новичок в реагировании, поэтому, пожалуйста, помогите мне. Поэтому я пытаюсь пропинговать API в первый раз, когда страница загружается, и после этого при обновлении магазина

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

 const eventReport = useSelector<{
    eventReport: {
      filters: IEventReportFilters,
      options: IEventReportOptions,
      reportType: string,
      reportName: string,
      totalCount: number,
      columns: [],
      rows: [],
    }
  },
    {
      filters: IEventReportFilters,
      options: IEventReportOptions,
      totalCount: number,
      reportType: string,
      reportName: string,
      columns: [],
      rows: [],
    }
    >(state => state.eventReport, deepEqual)

  React.useEffect(() => {
    eventReportFetch(
      eventId,
      eventReport.options,
      dispatch,
      timeFormat,
      dateFormat
      ).catch(console.error)
  }, [])
 

Поэтому я получаю значения хранилища по умолчанию и вызываю API с помощью функции eventReportFetch (), которая также обновляет хранилище в конце.

 export async function eventReportFetch(
  eventId: number,
  options: IEventReportOptions,
  dispatch: Dispatch,
  timeFormat: string,
  dateFormat: string
) {
  const handleError = (displaySnackBar: boolean = true) => {
    if (displaySnackBar) {
      dispatch({
        type: 'SNACKBAR_MESSAGES',
        severity: 'error',
        messages: ['Failed to fetch report'] //toDo Translate Report Name
      })
    }
  }
  try {
    const result = await postReporting({
      eventId: eventId,
      page: options.page,
      pageSize: options.pageSize,
      reportType: 'athleteReport', //ToDo
      filters: options.filters,
      dateFormat: dateFormat,
      timeFormat: timeFormat,
      orderBy: options.orderBy,
      orderDirection: options.orderDirection
    })
    if (isLambdaError(result)) {
      return handleError(isBadGatewayLambdaError(result))
    }
    const { columns, hits, total } = result
    const formattedCols = (
      columns?.length
        ? columns
        : hits
        ? Object.keys(hits[0]?._source || {}).map<ReportColumn>(field => ({
          field,
          name: field.split('_').join(' '),
          sortable: false,
        }))
        : []
    ).map<Column<object>>(({ field, name: title, sortable: sorting }) => ({
      cellStyle: {
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        maxWidth: '500px',
      },
      emptyValue: '-',
      field,
      sorting,
      title,
    }))
    const rows = hits ? hits.map((hit) => hit._source) : []
    dispatch({
      type: 'UPDATE_EVENT_REPORT',
      options,
      rows,
      columns: formattedCols,
      totalCount: total ?? 0,
    })
  } catch (e) {
    console.error(e)
    return handleError()
  }
 

В компоненте таблицы материалов я отслеживаю изменения в хранилище и в основном обновляю строки

 React.useEffect(() => {
    tableRef.current amp;amp; tableRef.current.onQueryChange()
  }, [eventReport, eventReport.options])
 

У меня проблема с сортировкой строк, поэтому я обновляю магазин, но конечная точка API никогда не вызывается?

 data={
                async (query) => {
                  const {
                    orderBy,
                    orderDirection,
                    page,
                    pageSize
                  } = query
                  try {
                    //this is not working
                    dispatch({
                      type: 'REPORT_OPTIONS',
                      options: {
                        ...eventReport.options,
                        orderBy,
                        orderDirection,
                        page,
                        pageSize
                      }
                    })
                    return ({
                      data: eventReport.rows,
                      page: eventReport.options.page,
                      totalCount: eventReport.totalCount
                    })
     
 

Есть идеи, как решить эту проблему, может быть, добавить что-то в эффект первого использования?