React. Как передать обновленное состояние при изменении в дочернем компоненте?

Question

[Предэйтор]

const getAllLists = () => {
  const data = [
    {
      id: 1,
      title: "The Vines",
      wrapped: false
    },
    {
      id: 2,
      title: "AURORA",
      wrapped: false
    },
  ];
  return data;
};

Родитель, который должен сделать ререндер при обновлении состояния в методе setWrapped.

import React, { useState, useEffect } from "react";
import { getAllLists } from '../api';

import { List } from "./List";

export const Lists = () => {
  const [lists, setLists] = useState([]);

  useEffect(() => {
    const fetchLists = async () => {
      const data = await getAllLists();
      setLists(data);
    };

    fetchLists();
  }, []);
  

  const setWrapped = id => {
    const data = lists;
    const idx = data.findIndex(i => i.id === id);
    data[idx].wrapped = !data[idx].wrapped;
    console.log(data[idx]);
    setLists(data);
  };

  return (
    <>
       {lists.map(list => (
         <List key={list.id} list={list} setWrapped={setWrapped}>{...}</List>
       ))}
    </>
  );
}

Компонент списка с пропами родителя:

import React from "react";

export const List = ({ list, children, setWrapped }) => {
  const { id, title, wrapped } = list;

  return (
    <div className="list">
      <div className="list-top">
        <h1>{title}</h1>
        <button onClick={() => setWrapped(id)}>Click</button>
      </div>

      {!wrapped && (
        <div className="cards">
          {children}
        </div>
      )}
    </div>
  );
}

Но ререндер компонента List не происходит, хотя данные в общем Lists меняются. Почему? Как правильно обновлять общее состояние?

Answer 1

[hzzzzl]

const data = lists;

это тот же участок в памяти, попробуй data = [...lists] для создания копии

Comments

[Предэйтор]

Благодарю! Совсем позабыл о том что память вообще существует) Будни фронтенда.