ReactJS：如何使用反应钩子将现有数组添加到另一个数组？（关闭）答案

【问题标题】：ReactJS: How to add an existing array to another array using react hooks? (CLOSED)ReactJS：如何使用反应钩子将现有数组添加到另一个数组？（关闭）
【发布时间】：2020-02-21 09:36:27
【问题描述】：

我正在尝试使用反应挂钩将数组添加到现有数组中。我唯一的问题是我尝试的所有东西都没有填充数组......

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 >

【问题讨论】：

你consoel.log() residencesInfo 和 resiFinal 变量的值像setResidenceFinal(resiFinal) 之前一样吗？
尝试：setResidenceFinal([...resiFinal]);，但设置状态的正确方法是：setResidenceFinal([... residenceFinal, ...resiFinal]); 也保持以前的状态。
controlledEntity.info.data 很可能是一个空数组。
不清楚您的代码应该做什么。 getContent 在哪里使用，何时调用？此外，getter 通常是无副作用的，这意味着它在调用时不会改变应用程序的状态。但这可能只是由于命名不当。如果您的目标是将resiFinal 附加到当前状态，那么它只是：setResidenceFinal(current => [...current, ...resiFinal]);
@trixn 我在使用 getContent 的地方编辑了我的帖子。

标签： arrays reactjs react-hooks

【解决方案1】：

你需要使用传播语法

工作原理示例：

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

所以对于你的情况

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

【讨论】：

【解决方案2】：

您可以使用spread syntax 来实现：

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

正如我在上面的评论中告诉你的，这是设置状态的正确方法，在添加新状态的同时保留以前的状态。永远不要直接改变状态。

【讨论】：

【解决方案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 中推荐使用扩展操作符更新状态

【讨论】：

虽然这是正确的，但 push 不是用于使用 React 进行状态更新的好习惯，因为它会发生变异。