Блог

Главная - Вопросы по программированию - Как ввести массив в другой массив reactjs

Как ввести массив в другой массив reactjs

#javascript #reactjs

#javascript #reactjs

Вопрос:

Привет, я новичок в 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>
  );
}

Это результат

Может кто-нибудь объяснить мне, почему я получаю ошибку и как ее исправить? , надеюсь, вы, ребята, понимаете, о чем я спрашиваю: D

Комментарии:

1. вы пытались удалить data зависимость от useEffect перехвата?

2. удалите данные из зависимости эффекта и установите их с помощью обратного вызова: setData(data=>{const cloned={...data};other code; return cloned}

Ответ №1:

В react есть два сценария, в которых компонент повторно отображает

  1. При изменении состояния (в данном случае примером является searchFile,)
  2. Когда изменяется реквизит (свойства, переданные компоненту)

Функция

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

вызывается каждый раз, когда компонент выполняет вызов setSearchfile . Итак, как только setSearchfile вызывается, компонент повторно отображает еще раз, вызывая ту же функцию, упомянутую выше (Authservice.getAllData()) .Этот процесс повторяется. Таким образом, это приведет к бесконечному циклу, который браузер не может обработать. Следовательно, вы получаете указанную выше ошибку.

Перемещение (Authservice.getAllData()) в метод useEffect должно решить проблему превышения максимальной глубины обновления.

Ответ №2:

Это приводит к тому, что вы устанавливаете setData внутри цикла.

Один из способов, который вы можете сделать, вы можете хранить массив внутри const и setData(...data, *that const*) вне цикла. на самом деле вам не нужен цикл. Насколько я знаю, данные MDDATABLE map сами по себе.

согласно вашему коду, вы можете просто сделать это,

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

Надеюсь, вы поняли это.

Метки: