Le titre est réécrit comme suit : "Le numéro de ligne renvoyé par la table de données Mui est NaN".

Question

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

importer des axios depuis "axios" ;

importer io depuis "socket.io-client" ;

importer { DataGrid } depuis "@mui/x-data-grid" ;

importer NaveBar depuis "../NaveBar/NaveBar" ;

importer la SideBar depuis "../SideBar/SideBar" ;

importer "./NewsTable.scss";

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

const NewsTablee = () => {

  const [actualités, setNews] = useState([]);

  //mise à jour des nouvelles deeebd

  useEffect(() => {

    const fetchData = async () => {

      essayer {

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

        setNews(allnews.data.Date);

      } attraper (erreur) {

        console.log(erreur);

      }

    } ;

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

      récupérer les données ();

    });

  }, [nouvelles]);

  useEffect(() => {

    axios

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

      .then((s) => {

        setNews(s.data.Date);

      })

      .catch((euh) => {

        console.log(er);

      });

  }, []);

  const message = () => {

    socket.emit("une actualité mise à jour", "une actualité mise à jour");

  } ;

  colonnes const = [

    {

      champ : "_id",

      headerName : "non",

      flexion : 0,5,

      renderCell : (paramètres) => {

        console.log(params.row.Index + 1); // ajoute cette ligne

        return 
{(params.row.index + 1).toString()}

        ;

      },

    },

    { field : "Titre", headerName : "Titre", flex : 3, triable : true },

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

    { champ : "Nom d'utilisateur", nom d'en-tête : "Nom d'utilisateur", flex : 1 },

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

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

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

    { champ : "priorité", nom d'en-tête : "Priorité", flex : 1 },

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

  ];

  retour (

    ≪>

      

      

      


        


          


            

          

          


             ligne._id}

              sortModel={[{ champ : "createdAt", tri : "desc" }]}

            />

          

        

      

    ≪/>

  );

};
导出默认NewsTablee;}
返回行号为nan
            

Answer 1

Comme bonne pratique, je recommande de redéfinir les colonnes comme ceci :

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

De plus, je suppose que l'objet {news} possède une propriété d'index, qui est un nombre.