Блог

У меня есть массив из 2 объектов [{...},{...}] . Каждый объект имеет 5 свойств с ключом:значение

 consent: true id: "00c3e7ab-7411-4c52-87e0-01779cd658ad" idConfirmed: true label: "test_Label" presignedURL: "https://s3.eu-west-1.amazonaws.com/......./..."  

Структура Массива

Я хочу использовать этот массив в качестве «данных» для моей таблицы реакций и отображать (в виде строки) URL-адрес, указанный пользователем, для каждого элемента массива. Мне нужно, чтобы это была строка, потому что я хочу обернуть этот тег «a», чтобы направить его в presignedURL. Я могу сделать все так, как я хочу, но значения PreseignedURL имеют тип Object, а не string, поэтому я не могу направить свой тег туда, куда хочу.

указание на локальный хост:3000//[объект объекта] вместо URL-адреса

Что я сделал до сих пор:

Я попытался отобразить содержимое ячеек .toString(), но это не имеет никакого эффекта

 lt;a href={cell.render('Cell'.toString())}gt;{(cell.render('Cell'))}lt;br /gt;lt;/agt;  

Я также попытался преобразовать значения presignedURL из массива внутренних объектов в массив строк, const stringArr = initialArr.map(({ presignedURL }) =gt; presignedURL) но тогда я не думаю, что смогу использовать таблицу react для отображения этого массива, поскольку для таблицы React(как я понимаю) требуется пара ключ/значение, чтобы ключ можно было использовать в качестве средства доступа:

В принципе, мне нужно знать, как и возможно ли отобразить содержимое ячейки в виде строки типа с помощью react-таблицы?

Полный код для компонента:

 const ReviewRounds = () =gt; {   const[rounds, setRounds]=useState([]);   useEffect(()=gt;{  fetchVids(); },[])   const fetchVids=async()=gt;{    await axios.get(process.env.REACT_APP_URL_All_ROUNDS)  .then(res=gt;{  console.log("Response:", res.data)  setRounds(res.data)  }); };   //Table Cols  const columns = React.useMemo(  ()=gt;[  {  Header:"Videos",  accessor: "presignedURL"  },  ],  []  )   const{  getTableProps,  getTableBodyProps,  headerGroups,  rows,  prepareRow,  } =useTable({columns , data:rounds})   return (  lt;table {...getTableProps()} style={{ border: 'solid 1px blue' }}gt;  lt;theadgt;  {headerGroups.map(headerGroup =gt; (  lt;tr {...headerGroup.getHeaderGroupProps()}gt;  {headerGroup.headers.map(column =gt; (  lt;th  {...column.getHeaderProps()}  style={{  borderBottom: 'solid 3px blue',  background: 'aliceblue',  color: 'black',  fontWeight: 'normal',  fontSize:'28px'  }}  gt;  {column.render('Header')}  lt;/thgt;  ))}  lt;/trgt;  ))}  lt;/theadgt;  lt;tbody {...getTableBodyProps()}gt;  {rows.map(row =gt; {  prepareRow(row)  return (  lt;tr {...row.getRowProps()}gt;  {row.cells.map(cell =gt; {  return (  lt;td  {...cell.getCellProps()}  style={{  padding: '10px',  border: 'solid 1px gray',  background: 'aliceblue',  }}  gt;  lt;a href={cell.render('Cell'.toString())}gt;{(cell.render('Cell'))}lt;br /gt;lt;img src={hospital}/gt;lt;/agt;  lt;/tdgt;  )  })}  lt;/trgt;  )  })}  lt;/tbodygt;  lt;/tablegt;  )  }  export default ReviewRounds;