Javascript 如何将数组输入到另一个数组

您好，我是reactjs的初学者，我正在尝试映射数组并将文件插入另一个数组，插入后，我将文件映射到表中，但出现错误“超出了最大更新深度”

这是我的密码

import React, { useEffect, useState } from "react";
import "../Components.css";
import { MDBDataTable } from "mdbreact";
import AuthService from "../../Services/AuthService";
// import AuthService from "../Services/AuthService";

export default function Dataadmin() {
  const [Searchfile, setSearchfile] = useState([]);
  const [data, setData] = useState({
    columns: [
      {
        label: "No",
        field: "no",
        sort: "asc",
      },
      {
        label: "Title",
        field: "title",
        sort: "asc",
      },
      {
        label: "Singer",
        field: "singer",
        sort: "asc",
      },
      {
        label: "Genre",
        field: "genre",
        sort: "asc",
      },
      {
        label: "Country",
        field: "country",
        sort: "asc",
      },
      {
        label: "Action",
        field: "action",
        sort: "asc",
      },
    ],
    rows: [],
  });
  AuthService.getalldata().then((res) => {
    setSearchfile(res.data);
  });

  useEffect(() => {
    Searchfile.map((item, index) => {
      const cloned = { ...data };
      cloned.rows.push({
        no: index + 1,
        title: item.title,
        singer: item.singer,
        genre: item.genre,
        country: item.country,
        action: (
          <>
            <button className="btn-action">
              <i className="fas fa-pencil-alt"></i>
            </button>
            <button className="btn-action" style={{ marginLeft: "1vh" }}>
              <i className="far fa-trash-alt"></i>
            </button>
          </>
        ),
      });
      setData(cloned);
    });
  }, [Searchfile, data]);
  return (
    <div className="div-admin">
      <div className="table-adminss">
        <MDBDataTable
          className="mytable-admin"
          striped
          bordered
          small
          data={data}
        />
      </div>
    </div>
  );
}

import React，{useffect，useState}来自“React”；
导入“./Components.css”；
从“mdbreact”导入{MDBDataTable}；
从“../../Services/AuthService”导入AuthService；
//从“./Services/AuthService”导入AuthService；
导出默认函数Dataadmin（）{
const[Searchfile，setSearchfile]=useState（[]）；
const[data，setData]=useState({
栏目：[
{
标签：“否”，
字段：“否”，
排序：“asc”，
},
{
标签：“标题”，
字段：“标题”，
排序：“asc”，
},
{
标签：“歌手”，
字段：“歌手”，
排序：“asc”，
},
{
标签：“流派”，
字段：“类型”，
排序：“asc”，
},
{
标签：“国家”，
字段：“国家”，
排序：“asc”，
},
{
标签：“行动”，
字段：“行动”，
排序：“asc”，
},
],
行：[]，
});
AuthService.getalldata（）.then（（res）=>{
设置搜索文件（res.data）；
});
useffect（（）=>{
Searchfile.map（（项目，索引）=>{
const cloned={…data}；
克隆。行。推送({
否：索引+1，
标题：item.title，
歌手：item.singer，
类型：item.genre，
国家：item.country，
行动：(
),
});
setData（克隆）；
});
}，[Searchfile，data]）；
返回(
);
}

---

有人能给我解释一下我为什么会出错以及如何修复它吗，希望你们能理解我的问题：在react中有两种场景，其中一个组件重新呈现

当状态更改时（在本例中，示例为searchFile，）

当道具更改时（传递给组件的属性）

功能

  AuthService.getalldata().then((res) => {
        setSearchfile(res.data);
      });

每次组件呈现时调用

setSearchfile

。因此，一旦调用了

setSearchfile

，组件将再次重新呈现，调用上述

（Authservice.getAllData（））

。此过程将重复。因此，这将导致浏览器无法处理的无限循环。因此，您会得到上述错误

---

将

（Authservice.getAllData（））

移动到

useffect

的方法中，应该可以解决超出的最大更新深度。

这是因为您在循环中设置了setData。

一种方法是，将数组存储在

const

和

setData（…data，*that const*）

循环外部。实际上，这里不需要循环。据我所知，MDDataTable映射数据本身

根据您的代码，您可以简单地执行此操作

useEffect(() => {
      setData(...data, Searchfile) //if your Searchfile contains data
    });
  }, [Searchfile, data]);

---

希望您能理解。

您是否尝试从

useffect

hook中删除

data

依赖项？从effect依赖项中删除数据并使用回调设置：

setData（data=>{const cloned={…data}；other code；return cloned}