ReactJS: Как добавить существующий массив в другой массив, используя реакционные хуки? (ЗАКРЫТО)

Question

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

const [ residenceFinal, setResidenceFinal ] = useState([]);

Я создал значение здесь, и ниже я пытаюсь добавить существующий массив в ResidenceFinal.

const predefinedMenuItems = {
      residences: {
            closeOnClick: false,
            setActiveOnClick: true,
            tooltip: "Residences",
            content: <i className='fas fa-city'/>,
            onClick: () => {
                dispatch(getValue(value));
            },
            getContent: (controlledEntity) => {
                const divTitle = "Residence info";

                let res = controlledEntity.info;
                const {data} = res;
                let residencesInfo = [];
                _.isArray(data) ? residencesInfo = data : residencesInfo.push(data);

                let resiFinal = residencesInfo.map(function(el) {
                    var o = Object.assign({}, el);
                    o.isActive = false;
                    return o;
                  })

                setResidenceFinal(resiFinal);
                return <div className="open-data-information-drawer-item residences">
                    <h1>{divTitle}</h1>
                    <div className="open-data-item-information-container">
                        {residenceFinal.map((residence, idx) => {
                            return <div className={"open-data-item-information-container-item "+ (residence.isActive ? 'active' : '') + " item-" + idx}  onClick={ (e) => onClickIdentification(residence, idx)} key={idx}>
                                {getOpenDataLi(residence, "identificatiecode")}
                                {getOpenDataLi(residence, "status")}
                                {getOpenDataLi(residence, "oppervlakte")}
                        }
                            </div>;
                        })}
                    </div>
                </div>;

            }
       }
}

Итак, я пробовал множество вариантов, чтобы добавить resiFinal к ResidenceFinal (имя изменится, когда я исправлю это, кстати), но каждый раз, когда я проверяю, ResidenceFinal все еще пуст ...

Может ли кто-нибудь помочь мне?

Редактировать: добавлено, где используется getContent.

const [ drawerContent, setDrawerContent ] = useState(<div></div>);

function handleClick(index, e) {
        const selectedMenuItem = menuItems.find(m => m.id === index);

        setDrawerContent(selectedMenuItem.getContent(openData));
    }

<List.Item >
    <div key={predefinedMenuItemId} onClick={ e => handleClick(predefinedMenuItemId, e)}  className={isMenuItemActive ?  'list-item list-item-' + predefinedMenuItemId  : 'list-item list-item-' + predefinedMenuItemId }></div>
</List.Item >

Answer 1

Вам нужно использовать Spread Syntax

пример того, как он работает:

var colors = ['red', 'green', 'blue'];
var refColors = [...colors, 'yellow'];
//colors => ['red', 'green', 'blue']
//refColors => ['red', 'green', 'blue', 'yellow']

Так что для вашего случая

setResidenceFinal(current => [...current, ...resiFinal])

Answer 2

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

setResidenceFinal([... residenceFinal, ...resiFinal]);

Как уже говорилось в моем комментарии выше, это правильный способ установить состояние, сохранение предыдущего состояния при добавлении нового состояния. Никогда нельзя мутировать состояние напрямую.

Answer 3

Способ добавления массива в существующий массив

• pu sh () метод

• оператор спреда

• метод concat ()

let array = [1,2];
array.push(...[3,4])
console.log(array)

let array2 = [10,11];
let newArray = [...array2, ...[12,13]];
console.log(newArray)

let array3 = [20,21];
let newArray2 = [22,23].concat(...array3)
console.log(newArray2)

вы можете добавить, используя такие способы.

setResidenceFinal([...residenceFinal, ...resiFinal]);

Рекомендуется использовать оператор распространения для обновления состояния в реакции