Блог

Я использую Material Table для отображения своих данных. Вот это выглядит так: https://i.postimg.cc/4x6hbm5N/image.png

Я объявил state выше в своем коде

 const [sharedOrdersList, setShareOrdersList] = useState([])  

Когда User вы нажмете на Share кнопку, я нажму на Order Id «до sharedOrdersList «. Это работает. Но теперь моя проблема заключалась в том, что я хочу изменить название кнопки на UnShare и цвет кнопки на другой цвет. Я попробовал несколько способов. Но я не знаю, как это сделать

Вот мой функциональный код:

 const shareOrderBtnClick = (orderID) =gt; {  sharedOrdersList.push(orderID)   alert("share Btn Clicked")  console.log(sharedOrdersList)  }  

Код Возврата:

 allOrderDatas.map((row) =gt; (  lt;TableRowgt;  lt;TableCell"gt;  lt;Button variant="contained"   onClick={()=gt;{shareOrderBtnClick(row.orderID)}}  style={{ backgroundColor:sharedOrdersList.includes(row.orderID)?"#59886B":"#D54062",}}gt;   lt;ShareIcon /gt;{sharedOrdersList.includes(row.orderID)?"UnShare":"Share"lt;/Buttongt;  lt;/TableCellgt;  lt;/TableRowgt;  

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

состояния в react неизменны. useState возвращает значение и функцию обновления. Вы не можете напрямую изменить значение. Чтобы обновить состояние, вам нужно вызвать setShareOrdersList функцию с новым значением.

В твоем примере

 const shareOrderBtnClick = (orderID) =gt; {  setShareOrdersList([... sharedOrdersList, orderID]);  // OR BETTER // setShareOrdersList(prevState =gt; [...prevState, orderID]);  }