ReactJS:如何使用reacthook将现有数组添加到另一个数组?(已关闭)

Question

我正试图使用react钩子将一个数组添加到现有数组中。我唯一的问题是我所尝试的一切都没有填满数组。。。

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>;
}
}
}

所以我尝试了很多变体来将residenceFinal添加到residenceFinal中(顺便说一句，当我修复它时，命名会改变(，但每次我检查时，residence终审仍然是空的。。。

有人能帮我吗？

Edit：在使用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

将数组添加到现有数组的方法

• push((方法

• 扩散算子

• 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]);

建议使用排列运算符更新react 中的状态