Der Titel wird wie folgt umgeschrieben: „Die von der Mui-Datentabelle zurückgegebene Zeilennummer ist NaN.'

Question

import React, { useState, useEffect } from "react";

Axios aus „Axios“ importieren;

io aus „socket.io-client“ importieren;

import { DataGrid } aus "@mui/x-data-grid";

NaveBar aus „../NaveBar/NaveBar“ importieren;

importiere SideBar aus „../SideBar/SideBar“;

import "./NewsTable.scss";

const socket = io("http://localhost:5000/");

const NewsTablee = () => {

  const [news, setNews] = useState([]);

  //Neuigkeiten aktualisieren deeebd

  useEffect(() => {

    const fetchData = async () => {

      versuchen {

        const allnews = waiting axios.get("http://localhost:5000/api/news");

        setNews(allnews.data.Date);

      } Catch (Fehler) {

        console.log(error);

      }

    };

    socket.on("updateNewsTable", () => {

      Daten abrufen();

    });

  }, [Nachricht]);

  useEffect(() => {

    Axios

      .get("http://localhost:5000/api/news")

      .then((s) => {

        setNews(s.data.Date);

      })

      .catch((er) => {

        console.log(er);

      });

  }, []);

  const message = () => {

    socket.emit("eine aktualisierte Nachricht", "eine aktualisierte Nachricht");

  };

  const columns = [

    {

      Feld: "_id",

      headerName: "nein",

      Flex: 0,5,

      renderCell: (params) => {

        console.log(params.row.Index + 1); // Diese Zeile hinzufügen

        return <div>{(params.row.index + 1).toString()}</div>

        ;

      },

    },

    { field: "Title", headerName: "Title", flex: 3, sortable: true },

    { field: "createdAt", headerName: "createdAt", flex: 2 },

    { field: "UserName", headerName: "UserName", flex: 1 },

    { field: "Resurce", headerName: "Resurce", flex: 1 },

    { field: "Language", headerName: "Language", flex: 1 },

    { field: "ProtectionLevel", headerName: "Protection Level", flex: 1 },

    { field: "priority", headerName: "Priority", flex: 1 },

    { field: "Media", headerName: "Media", flex: 1 },

  ];

  zurückkehren (

    <>

      <NaveBar />

      <SideBar />

      <div className='content-wrapper' style={{ minHeight: "1172.56px" }}>

        <div className='NewsTableContainer'>

          <div className='headrt'>

            <-Taste

              onClick={message}

              style={{ height: 30, width: 30 }}></button>

          </div>

          <div style={{ height: "570px", width: "100%" }} className='newsTable'>

            <DataGrid

              rows={news}

              columns={columns}

              getRowId={(row) => row._id}

              sortModel={[{ field: "createdAt", sort: "desc" }]}

            />

          </div>

        </div>

      </div>

    </>

  );

};

导出默认NewsTablee;}

返回行号为nan

Answer 1

作为良好的实践，我建议像这样重新定义列：

{
      field: "_id",
      headerName: "no",
      flex: 0.5,
      type: 'number', valueGetter: (params) =>  `${params.row.index + 1}`
    },

另外，我假设{news}对象确实有一个index属性，它是一个数字。