我正在尝试使用 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>;

            }
       }
}

所以我尝试了很多变化来将 resiFinal 添加到 ResidenceFinal (顺便说一句,当我修复它时,命名会改变)但是每次我检查时,resiFinal 仍然是空的...

有人可以帮助我吗?

编辑:在使用 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 >

#1楼 票数:1 已采纳

您需要使用扩展语法

它是如何工作的示例:

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

所以对于你的情况

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

#2楼 票数:0

您可以将数组添加到现有数组的方式

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

推荐使用扩展运算符来更新反应中的状态

#3楼 票数:0

您可以使用传播语法来实现这一点:

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

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

  ask by rebuff translate from so

未解决问题?本站智能推荐:

1回复

ReactJS 钩子用另一个数组更新一个数组

我想用另一个数组更新一个空数组,我真的不知道该怎么做, 我想用另一个数组更新空数组,如下所示: 这里的问题是,我从响应中得到的 4 个项目,它们将被设置为头像数组的第一个元素,而不是多个, 这意味着,我在 avatar[0] 下,所有项目放在一起,他们不会像他们应该的那样分开。 我希望你
1回复

将对象添加到反应钩子数组会导致其变为 null [关闭]

关闭。 这个问题需要细节或清晰。 它目前不接受答案。 想改
2回复

从一个数组中删除对象,同时将其添加到另一个数组中 - React hooks

我正在开发一个类似 Tinder 的应用程序,并尝试从阵列中删除当前卡,并在单击“喜欢”或“不喜欢”按钮时移至下一张。 同时,我试图将卡片添加到一个新数组(喜欢或不喜欢的列表)。 将对象添加到新数组似乎有效(尽管有延迟并且按钮需要单击两次 - 这也需要排序),但是一旦我尝试从当前数组中删除它,它就会
1回复

使用反应钩子更新数组

我正在使用 Upsplash API 制作一个应用程序。 渲染时我想显示 30 张图像,女巫工作正常。 然后我使用我的上下文将 AllPhotos 传递给我的 Photos.js,并映射到 allPhotos,将照片传递给我的 Image 组件以显示有关图像的信息。 从这里 API 显示的图
3回复

将 +1 添加到数组 React 中单击的元素

我有一个包含一些博客文章的页面,我希望用户能够对每篇文章点赞/点赞,并查看每篇文章有多少赞。 现在,当我喜欢一个帖子时,所有帖子都会获得相同数量的喜欢。 我如何只喜欢我点击的帖子? 这是我的代码的相关部分:
1回复

如何使用钩子将表单输入值作为数组对象存储在另一个文件中?

我正在尝试存储以位于 FooterComponent.js 中的表单输入的用户输入,并将该输入存储在位于 contact.js 中的数组中,我试图通过在 React 中使用钩子来实现。 这是我的footerComponent.js 包含表单: const FooterCompone
4回复

如何使用反应钩子将新值推送到当前数组中?

这是源代码。 我想要做的是将一个新值推送到当前数组中,并在单击按钮时更新长度和值。 它正常打印到控制台,但不更改显示。 如何解决这个问题?
1回复

尝试使用反应钩子设置状态,但我得到的是一个空数组 [关闭]

关闭。 这个问题需要更加集中。 它目前不接受答案。 想改善