Мой список зависит от переключения массива только один раз, но в консоли он продолжает разворачиваться

#reactjs

Вопрос:

Я получаю массив и применяю к нему обратный метод. но по какой-то причине он переворачивается только 1 раз, хотя в консоли он переворачивается так, как и должно быть

 function BasicTable(props) {
  const tabKey = props.contentDataKey;
  const arrKey = props.content; //array []

  const [newArr, setnewArr] = useState(arrKey);

  console.log(newArr);
  return (
    <div>
      <List className="ListHead">
        <ListItem>Id</ListItem>
        <ListItem
          onClick={() => {
            console.log("zxc");
            arrKey.reverse();
            console.log(arrKey);
            setnewArr(arrKey);
          }}
        >
          {tabKey.firstRowText}
        </ListItem>
        <ListItem>{tabKey.secondRowText}</ListItem>
        <ListItem> {tabKey.thirdRowtext}</ListItem>
      </List>
      <Divider />
      {!isEmpty(arrKey) amp;amp;
        arrKey.map((row, i) => (
          <List className="Listbody">
            <ListItem align="left">{i   1}</ListItem>
            <ListItem>{row[tabKey.firstRowKey]}</ListItem>
         ...
 

Ответ №1:

Обратный метод изменяет массив, и вы не можете изменить свои реквизиты

 const arrKey = props.content.slice().reverse();
 

Вы можете использовать slice, чтобы сделать копию и сохранить ее где-нибудь

Или если вы хотите повернуть вспять только при нажатии на кнопку:

 setnewArr(arrKey.slice().reverse());
 

Вы также сопоставляете данные из массива реквизитов, возможно, вы хотели сопоставить данные из состояния:

 newArr.map((row, i) => (
 

Чтобы увидеть обратные результаты

Комментарии:

1. Я сохранил все(даже массив карт из реквизита), просто изменил функцию onClick , как это, и все это работает, но я понятия не имею, как onClick={() => { arrKey.reverse(); setnewArr(arrKey.slice()); }}