Как заставить react перерендерить компонент?

Question

[DMITRY Chernenkiy]

Вроде вопрос простой но не знаю как сделать лучше
Есть компонент, в нем все отлично, все обновляется кроме одной переменной, но она и самая важная.

function CreateList({ filterList, caseMassive }) {

  // в caseMassive приходит массив типа[
  {  label: "first", important: true, id: 1,},
  { label: "second", important: false,id: 2,},
  { label: "third", important: true,id: 3,},
];

  let newMassive = caseMassive;

  // потом я этот масcив переделываю в список лишек "</li>"*

  let finishList = newMassive.map((element) => {
    return <ListItem key={element.id} element={element} />;
  });

  //  И ВООТ на этом этапе и проблема. Сам CreateList замечательно обновляется,
  // но переменная finishList  не перерендывается при изменениях.
  //  как сделать так чтобы переменная finishList также обновлялась при обновлении CreateList ?,

  return <ol>{finishList}</ol>;
}

Сам проект храниться здесь репозиторий
готовый билд посмотреть

Comments

[WbICHA]

let newMassive = caseMassive;

Зачем?

let finishList = newMassive.map((element) => {
    return <ListItem key={element.id} element={element} />;
  });

Зачем ты сохраняешь массив домов в переменную?

[G F]

2. чтобы не гадить в хтмле.

[WbICHA]

G F,

return <ol>{finishList}</ol>;

Такой хтмл, как бы не загадить.)

[G F]

WbICHA, ну в данном случае это и правда лишнее, никто до туда все равно не дочитает, глаза с нейнимнга раньше вытекут.

Answer 1

[vadimparinov]

Используй state для хранения массива и тогда будет обновляться.

Comments

[DMITRY Chernenkiy]

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

[vadimparinov]

Покажи лучше код. Чтобы убедиться что правильно используешь

[DMITRY Chernenkiy]

vadimparinov, Забрасываю непосредственно генерацию дом элементов в useState

function CreateList({ filterList, caseMassive }) {
  let [listDOMElements, setlistDOMElements] = useState(
    caseMassive.map((element) => {
      return <ListItem key={element.id} element={element} />;
    })
  );

а потом вывожу ее на страницу
return <ol>{listDOMElements}</ol>;

[vadimparinov]

DMITRY Chernenkiy, в state нужно хранить только сами элементы.

[DMITRY Chernenkiy]

попробовал вот так все равно без результата

let domLIst = caseMassive.map((element) => {
    return <ListItem key={element.id} element={element} />;
  });
  let [newList, setnewList] = useState(domLIst);

[vadimparinov]

DMITRY Chernenkiy,

const [newList, setnewList] = useState(domLIst);
     newList.map((element) => {
          return <ListItem key={element.id} element={element} />;
        );

Answer 2

[G F]

использовать immutable data structures. чтобы компонент запустил процесс ререндера ссылка на объект (caseMassive) должна поменяться
https://stackoverflow.com/questions/36084515/how-d...

Comments

[DMITRY Chernenkiy]

Не совсем понятно, immutable data structures в JS это ведь цифры и строки, как и зачем их тут использовать ?

[DMITRY Chernenkiy]

Или вы имеете ввиду библиотеку immutable.js ?

[G F]

DMITRY Chernenkiy, массив можно изменить мутировав его, например так
`arr[0].important = false` или так `arr.splice(1, 1)` или некоторыми другими методами. в этом случае у нас компонент не перерендерится потому что в пропсе будет та же самая ССЫЛКА на объект.
необходимо изменить ссылку т. е. передать новый объект.

[G F]

DMITRY Chernenkiy, https://stackoverflow.com/questions/36084515/how-d...

[DMITRY Chernenkiy]

G F, попробовал создать новый массив при помощи деструктуризации(насколько я знаю деструктуризация всегда возвращает новый массив)
но чет как-то не сработало

function CreateList({ filterList, caseMassive }) {

  let finishList = () => {
    let newMassive = caseMassive.map((element) => {
      return <ListItem key={element.id} element={element} />;
    });
    return [...newMassive];
  };
//   пробовал и закомментированный и незакоментированый способ *
  // let finishList = () => {

  //   let newMassive = [...caseMassive];
  //   return  newMassive.map((element) => {
  //     return <ListItem key={element.id} element={element} />;
  //   });
  // };

  return <ol>{finishList()}</ol>;
}

Может быть я не совсем понял суть и принцип применения ? или где-то совершил ошибку?

[DMITRY Chernenkiy]

G F, или новыми объектами должны быть конкретно вот эти <ListItem key={element.id} element={element} />
лист айтемы ?

[DMITRY Chernenkiy]

G F, Попробовал еще вот так

function CreateList({ caseMassive }) {
  const massiveClone = () => {
    let DOMList = caseMassive.map((element) => {
      return <ListItem key={element.id} element={element} />;
    });
    let copyList = DOMList.map((element) => {
      return Object.assign({}, element);
    });

    return [...copyList];
  };

  return <ol>{massiveClone()}</ol>;
}

Но что-то все равно не хочет перерендерить