Блог

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

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

Таблица.tsx —

 const Table: React.FClt;Propsgt; = (props: React.PropsWithChildrenlt;Propsgt;) =gt; {  const [ hitoryState, setHistoryState ] = useStatelt;IHistory | nullgt;(null);    const [ downloadLoadingState, setDownloadLoadingState ] = useStatelt;booleangt;(false);    const onDownland = (reportId: string) =gt; {   setDownloadLoadingState(() =gt; true);   backendAPIAxios.get(`/download/${reportId}`)  .then((response: AxiosResponselt;IDownloadResponsegt;) =gt; {    if (!response.data.file_link) {  return alert('Failed to download CSV');  }    setDownloadState(() =gt; response.data.file_link);  })  .catch((e: AxiosError) =gt; {  alert(`Failed to download CSV with error: ${e}`);  }).finally(() =gt; {  setDownloadLoadingState(() =gt; false);   });  };    return (  lt;TableView  iconName={props.iconName}  hitoryState={hitoryState}  onDownload={onDownland}  gt;{props.children}lt;/TableViewgt;  ); };  

Таблица.вид.tsx —

 interface Props {  readonly iconName?: keyof typeof icons;  readonly hitoryState: IHistory | null  readonly onDownload: (reportId: string) =gt; void;  readonly downloadLoadingState: boolean; }  const TableView: React.FClt;Propsgt; = (props: React.PropsWithChildrenlt;Propsgt;) =gt; {   return (  lt;div className={classes['outerContainer']}gt;  {hitoryState?.reports.map((history, idx) =gt; {  return (  lt;div className={classes['historyContainer']} key={idx}gt;  lt;div className={classes['historyContainer__options']}gt;  lt;span className={classes['historyContainer__svgWrapper']}gt;  lt;Buttongt;  {!props.downloadLoadingState ?  lt;MSvg  name='download'  className={classes['svgContainerBlack']}   onClick={() =gt; props.onDownload(history.id!)}  /gt; :  lt;Tooltip title={lt;h1 style={{ fontSize: '17px' }}gt;Loadinglt;/h1gt;} placement="left" arrowgt;  lt;CircularProgress color="inherit" /gt;  lt;/Tooltipgt;  }  lt;/Buttongt;  lt;/spangt;  lt;/divgt;  lt;/divgt;  )  })}  lt;/divgt;  ); };  

Как я могу изменить пользовательский интерфейс только для одного объекта?