Tajuk ditulis semula sebagai: "Nombor baris yang dikembalikan oleh jadual data Mui ialah NaN"

Question

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

import axios daripada "axios";

import io daripada "socket.io-client";

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

import NaveBar daripada "../NaveBar/NaveBar";

import SideBar dari "../SideBar/SideBar";

import "./NewsTable.scss";

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

const NewsTablee = () => {

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

  //kemas kini berita deeebd

  useEffect(() => {

    const fetchData = async () => {

      cuba {

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

        setNews(allnews.data.Date);

      } tangkap (ralat) {

        console.log(error);

      }

    };

    socket.on("kemas kiniNewsTable", () => {

      fetchData();

    });

  }, [berita]);

  useEffect(() => {

    aksios

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

      .then(s) => {

        setNews(s.data.Date);

      })

      .catch((er) => {

        console.log(er);

      });

  }, []);

  mesej const = () => {

    socket.emit("berita dikemas kini", "berita dikemas kini");

  };

  lajur const = [

    {

      medan: "_id",

      nama tajuk: "tidak",

      lentur: 0.5,

      renderCell: (params) => {

        console.log(params.row.Index + 1); // tambah baris ini

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

        ;

      },

    },

    { medan: "Tajuk", nama tajuk: "Tajuk", lentur: 3, boleh diisih: benar },

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

    { medan: "Nama Pengguna", nama kepala: "Nama Pengguna", flex: 1 },

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

    { medan: "Bahasa", headerName: "Bahasa", flex: 1 },

    { medan: "Tahap Perlindungan", nama tajuk: "Tahap Perlindungan", lentur: 1 },

    { medan: "keutamaan", nama tajuk: "Keutamaan", lentur: 1 },

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

  ];

  kembali (

    <>

      <NaveBar />

      <Bar Sisi />

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

        <div className='NewsTableContainer'>

          <div className='headrt'>

            <butang

              onClick={message}

              style={{ tinggi: 30, lebar: 30 }}></button>

          </div>

          <gaya div={{ tinggi: "570px", lebar: "100%" }} className='newsTable'>

            <Grid Data

              rows={berita}

              lajur={columns}

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

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

            />

          </div>

        </div>

      </div>

    </>

  );

};

导出默认NewsTablee;}

返回行号为nan

Answer 1

Sebagai amalan yang baik, saya mengesyorkan mentakrifkan semula lajur seperti ini:

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

Selain itu, saya menganggap bahawa objek {news} memang mempunyai sifat indeks, iaitu nombor.